摘要：内联元素层级在之上。不管是兄弟还是儿子，块级元素的层级都是后来者居上，但内联元素始终在块级元素之上。图中粉色边框黑色内联元素的是浮动元素，它的块级元素在所有块级元素之上，但是它的内联元素在所有内联元素之下。
css中有很多反人类直觉的东西，所以在学css的过程中最大的乐趣不在于记住多少，而在于自己动手做实验，一步步颠覆你的直觉，初学css层叠上下文，做了一些简单的小实验一步步验证自己的想法。
broder层级在background之上，把broder设置透明，可透过它看到background的颜色。
内联元素层级在border之上。
不管是兄弟还是儿子，块级元素的层级都是后来者居上，但内联元素始终在块级元素之上。
块级元素的内联元素也是后来者居上，蓝色红点是青色背景的内联元素，覆盖了之前块级元素的内联元素。
图中粉色边框黑色内联元素的是浮动元素，它的块级元素在所有块级元素之上，但是它的内联元素在所有内联元素之下。蓝色 > 黄色 > 黑色
下面一张图很好的展示了这些元素之间的层级关系。
灰色背景是浮动，和黑色背景是同级元素，层级应该是后来者居上（上图所示），但是在黑色背景上加position: relative，浮动元素就跑到他下面去了（下图所示）。
两兄弟元素被position: relative后且z-index:auto;，它们的子元素position:absolute后，它们之间的位置关系取决于z-index值的大小，谁大谁在上，如果两个值相等则后来者居上。
两个兄弟元素被position: relative定位后且z-index值不为auto，那么它们的子元素position:absolute后的位置关系和z-index的值没有关系，后来者居上。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113224.html
摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。 文章大纲来源：【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表（Cascading Style Sheets），即前端常说的CSS。 内容引用：CSS 简介 样式解决了什么问题？ HTML...
摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。 文章大纲来源：【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表（Cascading Style Sheets），即前端常说的CSS。 内容引用：CSS 简介 样式解决了什么问题？ HTML...
摘要：简介超文本标记语言英语，简称是一种用于创建网页的标准标记语言。网页浏览器可以读取文件，并将其渲染成可视化网页。网页浏览器也可以引用层叠样式表来定义文本和其它元素的外观与布局。元素表示某些重要性的文本，强调文本，而元素表示某些相关性的文本。 HTML简介 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是...
摘要：计算属性的计算值通常包括将相对值转换成绝对值如单位或百分比。返回的解析值可能是计算值或应用值。最后，计算布局尺寸比如或百分数换算为像素值，结果即应用值。继承当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。 css属性 我觉得大部分学习前端的人应该都没有按照教科书一般的来学习css，可能是类似搭积木一样，需要什么拿什么，所以可能最对一些基本的概念没有很好的理解，这里列出的是...
摘要：后来居上当元素的层叠水平一致层叠顺序相同的时候，在流中处于后面的元素会覆盖前面的元素。相关连接深入理解中的层叠上下文和层叠顺序层叠顺序探究分层的显示 什么是层叠上下文（stacking context） 可以理解为一个dom节点在Z轴高人一等，特性类似于BFC，即层叠上下文的内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。 CSS2创建层叠上下文的两种方法（参考MDN） 根元...
阅读 1661·2019-08-30 12:51
阅读 655·2019-08-29 17:30
阅读 3695·2019-08-29 15:17
阅读 850·2019-08-28 18:10
阅读 1354·2019-08-26 17:08
阅读 2168·2019-08-26 12:16
阅读 3428·2019-08-26 11:47
阅读 3495·2019-08-23 16:18
