前面讲了几种控制网页布局的方式，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. 7款WordPress图片分离对象存储插件 含国内主流云服务存储商

    如果我们有用WordPress搭建网站的朋友应该会发现网站文件和数据库其实没有多大,在网站运营几年后数据最大的就是图片.而且图片占用服务器的空间会搬家比较麻烦,而且占用服务求的带宽.我们看到很多的Wo ...

  2. [转]failed to recv data in handshakeReceive2Callback

    转自:http://xiaix.me/blog/27.html "failed to recv data in handshakeReceive2Callback"错误 一直用的好 ...

  3. react native android9 axios network error

    react native 发布成apk后网络请求会报 network error 是因为android9以后http协议不能用,要用htts协议.需要改成配置能兼容http协议,修改信息如下: and ...

  4. JS篇(004)-js 是一门怎样的语言，它有什么特点?

    答案: 1.脚本语言.JavaScript 是一种解释型的脚本语言,C.C++等语言先编译后执行,而 JavaScript 是在程序的运行过程中逐行进行解释. 2.基于对象.JavaScript 是一 ...

  5. Flink akka AskTimeoutException问题排查

    最近遇到一个很奇怪的问题,Flink任务正常启动正常运行一段时间后就会报错,,错误详情如下 2019-12-11 17:20:57.757 flink [flink-scheduler-1] ERRO ...

  6. RN 使用react-navigation写可以滚动的横向导航条

    在react-native中写横向导航条,首选肯定是react-navigation的createMaterialTopTabNavigator,附上官方文档链接.https://reactnavig ...

  7. Python 的入门学习之 Day1~3 ——from”夜曲编程“

    Day 1(原点) time: 2021.7.29. 以下为补录内容: 今天是编程学习的第一天,很开心.Here is the place where I start, which belongs t ...

  8. continue的使用

    continue是终止本次循环,进行下一个循环如果要跳到最开始的循环abc : for(){ for(){ for(){ continue abc; } }}

  9. iClock数据服务器默认账号密码

    网络空间资产搜索: shodan 搜索 默认密码 admin/a***n End!!!

  10. java中的数组遍历（简便小方法）

    int[] a = {1,2,3,4}; for(int k:a){ System.out.println(k); //注意冒号后面直接写数组名即可. //注意,k的值就是数组a中某一项的值,即语句& ...