前面讲了几种控制网页布局的方式，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. 如何在Debian10镜像中设置Nginx引擎模块

    目前,我们较多的服务器WEB环境都是用的Nginx引擎,我们采用服务器的目的是可以获取到更多的资源,而且建站数量是不受限制的.我们可以根据自己需要配置Nginx,可以自定义特定域的设置,允许您在单个服 ...

  2. 【笔记】DDD实战课-人保架构欧创新

    目录 开篇 学好DDD,你能做什么? 基础 领域驱动设计:微服务设计为什么要选择 DDD? DDD的两层设计 DDD与微服务的关系 领域.子域.核心域.通用域和支撑域:傻傻分不清? 领域和子域 核心域 ...

  3. cv::flip

    int main(int argc, char** argv) { cv::namedWindow("Example 2-3", cv::WINDOW_AUTOSIZE); cv: ...

  4. linux 中sed命令如何删除第一列和最后一列

    删除第一列 (base) root@PC1:/home/test# cat test.txt1 MIR1302-10 12 FAM138A 23 OR4F5 34 RP11-34P13.7 45 RP ...

  5. 服务器部署 halo博客项目

    2020-8-9 13:45:14 有个进阶方法!  如果静态资源加载缓慢如图片,头像  则用CDN加速  (确实很秀!) https://cdn.jsdelivr.net/gh/你的用户名/你的仓库 ...

  6. （jmeter笔记）jmeter导出excel，中文显示乱码

    导出excel显示乱码 解决方法:http请求--Content encoding写utf-8 导出如下:

  7. Elasticsearch Windows版安装配置

    Elasticsearch简介 Elasticsearch是一个开源的搜索文献的引擎,大概含义就是你通过Rest请求告诉它关键字,他给你返回对应的内容,就这么简单. Elasticsearch封装了L ...

  8. C# 以管理员方式运行程序

    让你的程序以管理员方式运行 在Program.cs文件中添加如下代码 /// <summary> /// 应用程序的主入口点. /// </summary> [STAThrea ...

  9. [OC] APP唤醒，URL Scheme，工程中的 URL Types 和 LSApplicationQueriesSchemes

    1.网页唤醒APP: 假设我们有一个APP,名字叫做 "APP甲",需要通过网页唤起 APP甲,我们首先需要在 APP甲的工程文件里配置参数 URL Types: 在 info.p ...

  10. [530] C3 Rise Of Darkness Opcodez

    [530] C3 Rise Of Darkness Client 00 SendProtocolVersion 01 MoveBackwardToLocation 02 Say 03 RequestE ...