前面讲了几种控制网页布局的方式，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. 让你深夜emo的“网抑云”，是如何做产品设计的？

    网易云音乐作为国内首个以"歌单"为核心架构的音乐APP,有的人喜欢它的热评,有的人却觉得它的版权太少,虽然网易云音乐不是曲库最丰富的听歌软件,但绝对是听歌软件里情感体验最好的. 我 ...

  2. C++ Error:C2011: 'struct' type redefinition

    C++ Error:C2011: 'struct' type redefinition        在c语言中,对同一个变量或者函数进行多次声明是不会报错的.所以如果h文件里只是进行了声明工作,即使 ...

  3. IPC，进程间通信

    信号机制 也叫软中断,软件层次上对中断的模拟 kill -9 加进程号可以终止进程 linux下执行kill -l可以看到 这里面居然没有32 33 直接从31到34 所以一共是62个信号 1) SI ...

  4. APP数据指标体系分析

    一.APP的数据指标体系主要分为五个维度,包括用户规模与质量.参与度分析.渠道分析.功能分析和用户属性分析. 1.用户规模和质量 用户规模和质量是APP分析最重要的维度,其指标也是相对其他维度最多,数 ...

  5. WebService 客户端上传图片，服务器端接收图片并保存到本地

    需求:如题,C#本地要调用Webservice接口,上传本地的照片到服务器中: 参考:客户端: https://blog.csdn.net/tiegenZ/article/details/799276 ...

  6. 03 Spark RDD编程基础

    1. 准备文本文件从文件创建RDD lines=sc.textFile()筛选出含某个单词的行 lines.filter() 2. 生成单词的列表从列表创建RDD words=sc.paralleli ...

  7. OSP6部署流程

    准备4台虚拟机,完成初始化 一.架构如下: Controller  控制节点 也可以复用为计算节点   192.168.6.11 Compute01   192.168.6.21 Compute02  ...

  8. Ubuntu 20.04 部署Prmoetheus+grafana+mysql+mysqld_exporter+node_exporter

    Prometheus简介 Prometheus是一个功能强大的开源监控系统,可从您的服务中收集指标并将其存储在时间序列数据库中.它通过Grafana等工具提供多维数据模型,灵活的查询语言和多样化的可视 ...

  9. Linux awk 替换文本字符串内容

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...

  10. JS篇(007)-事件委托是什么

    答案:利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行! 解析: 1.那什么样的事件可以用事件委托,什么样的事件不可以用呢? 适合用事件委托的事件:click,mousedown,mou ...