前面讲了几种控制网页布局的方式，flex,gird 和 float。这下我们初略讲下 position.这个我日常中用到的已经挺多了。定位和其他控制文档流的行为不同。它将元素彻底从文档流中移走，它允许你将元素放在屏幕的任意位置。还可以将一个元素放在另一个元素的前面或后面，彼此重叠。

  浏览器将 html 解析为 dom 的同时还创建了另一个树形结构，叫做渲染树。它代表了每个元素的视觉样式和位置。同时还决定浏览器绘制元素的顺序。顺序很重要，因为如果元素刚好重叠，后绘制的元素就会出现在先绘制的元素前面。通常情况下。元素在 html 里出现的顺序决定了绘制的顺序。定位元素时，这种行为会改变。浏览器会先绘制所有非定位的元素，然后绘制定位元素。

  默认情况下，所有的定位元素会出现在非定位元素前面。z-index 属性的值可以是任意整数正负都行。拥有较高 z-index 的元素出现在拥有较低 z-index 的元素前面。拥有负数 z-index 的元素会出现在静态元素后面。使用 z-index 是解决网页叠层问题的第二个方法。z-index 的行为很好理解，但是使用它时要注意两个小陷阱。第一，z-index 只在定位元素上生效，不能用它控制静态元素。第二，给一个定位元素加上 z-index 可以创建层叠上下文。

  一个层叠上下文包含一个元素或者由浏览器一起绘制的一组元素。其中一个元素会作为层叠上下文的根，比如给一个定位元素加上 z-index 的时候，它就变成了一个新的层叠上下文的根。所有后代元素就是这个层叠上下文的一部分。将层叠上下文里所有元素一起绘制会造成严重的后果：层叠上下文之外的元素无法放在层叠上下文内的两个元素之间。举个例子：

<!DOCTYPE html>

<html lang="cn" class="has-bottombar">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta

      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

      name="viewport"

    />

    <style>

      body {

        margin: 40px;

      }

      .box {

        display: inline-block;

        width: 200px;

        line-height: 200px;

        text-align: 200px;

        border: 2px solid black;

        background-color: #ea5;

        margin-left: -60px;

        vertical-align: top;

      }

      .one {

        margin-left: 0;

      }

      .two {

        margin-top: 30px;

      }

      .three {

        margin-top: 60px;

      }

      .positioned {

        position: relative;

        background-color: #5ae;

        z-index: 1;

      }

      .absolute {

        position: absolute;

        top: 1em;

        right: 1em;

        height: 2em;

        background-color: #fff;

        border: 2px dashed #888;

        z-index: 100;

        line-height: initial;

        padding: 1em;

      }

    </style>

  </head>

  <body>

    <div class="box one positioned">

      one

      <div class="absolute">nested</div>

    </div>

    <div class="box two positioned">tow</div>

    <div class="box three">three</div>

    <script></script>

  </body>

</html>

  这个代码包含了三个盒子，其中两个被定位，并且z-index为1，第一个盒子里有一个绝对定位的元素，它的z-index为100，虽然第一个盒子的z-index很高，但还是出现在第二个盒子后面，因为它的父元素，即第一个盒子形成的层叠上下文在第二个盒子后面。叠放在第二个盒子后面的第一个盒子是一个层叠上下文的根。因此，虽然它的z-index值很高，但它内部的绝对定位元素不会跑到第二个盒子前面。

  给一个定位元素加上z-index是创建层叠上下文最主要的方式，但有些属性也会创建，比如小于1的opacity属性，还有transform,filter属性。由于这些属性主要会影响元素及其子元素渲染的方式，因此一起绘制父子元素。

  如果不根据组件的优先级定义清晰的层叠顺序，那么一个样式表很容易演变成一场z-index大战。如果没有清晰的说明，开发人员在一个模态框之类的元素添加样式时，为了不被其他元素遮挡，就会设置一个高的离谱的z-index.这种事情重复几次后，大家就只能凭感觉给一个新的组件设置z-index.所以我们最好建立一个自定义属性文件，就能很方便的处理这个问题。将增量设为100，10，这样就可以在需要的时候往中间插入新值。

  如果发现z-index没有按照预期表现，就在dom树里往上找到元素的祖先节点，直到发现层叠上下文的根，然后给它设置z-index.

深入理解css 笔记（7）的更多相关文章

  1. 理解CSS

    写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更 ...

  2. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

  3. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  4. 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]

    深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...

  5. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  6. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  7. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  8. 理解CSS居中

    我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...

  9. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  10. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

随机推荐

  1. idea 导入项目之后，只显示项目文件，不显示项目结构

    导入项目之后,只显示项目文件,不显示项目结构 解决方法 1.点击file->project structure..->Modules 点击右上角+加号 ->import Module ...

  2. ComPiler200003：Story-Oriented Programming

    Story-Oriented Programming MAY 25TH, 2018 http://www.brandonkeown.com/2018/05/story-oriented-program ...

  3. Truenas Core安装（DOS界面）

    下载ISO安装包 搜索truenas core ,找到网站www.truenascore.com,根据网站导航栏指示,点击menu--software--truenas core--download ...

  4. 设置Redhat终端显示中文

    修改.bash_profile,增加: export LC_ALL= export LANG=C source .bash_profile

  5. chrome浏览器启用es6语法支持,初次体验浏览器端模块化加载

    医院项目,记录下,花了一个晚上的时间. 注意:最新版本的chrome浏览器已支持module语法,需要在web服务器环境下运行! 注:chrome76版本及以上不再需要设置了,浏览器已默认支持,至于从 ...

  6. git从某个分支的指定历史版本中创建新分支

    git从某个分支的指定历史版本中创建新分支 前提: 有时候,我们在一个分支上做了许多修改,而这些修改因即将上线等原因不可修改.而现在有一个新任务,需要在这个分支的这些修改之前进行开发. 方案①(不推荐 ...

  7. chfs共享系统搭建

    手机电脑文件共享搭建(http://iscute.cn/chfs) 1.下载wget http://iscute.cn/tar/chfs/2.0/chfs-linux-amd64-2.0.zip 2. ...

  8. 软件离线许可（License）实现原理

    我们经常使用各种开发软件,比如IntelliJ IDEA.Navicat.Visual Studio等,这些软件都有一个特点,就是要收费.一般是我们需要去购买一个许可,然后输入这个许可到软件里就能够使 ...

  9. 关于zookeeper集群的理解

    一.zookeeper集群节点容错性 1.在集群模式下,建议至少部署3个zk进程,或者部署奇数个zk进程.如果只部署2个zk进程,当其中一个zk进程挂掉后,剩下的一个进程并不能构成一个quorum的大 ...

  10. python机器学习——决策树算法

    背景与原理: 决策树算法是在各种已知情况发生概率的基础上通过构成决策树来求某一事件发生概率的算法,由于这个过程画成图解之后很像一棵树形结构,因此我们把这个算法称为决策树. 而在机器学习中,决策树是一种 ...