css如何让两个div上下排列_CSS层叠上下文

最新推荐文章于 2023-11-16 17:52:35 发布

weixin_39923806

最新推荐文章于 2023-11-16 17:52:35 发布

阅读量2.4k

点赞数

文章标签： css如何让两个div上下排列一个div 上下两行

在理解层叠上下文之前，我们先谈一谈CSS的z-index属性。

通常情况下，HTML页面可以被认为是二维的，因为文本，图像和其他元素被排列在页面上而不重叠。

然而其实CSS 允许你在现有的渲染引擎上层叠的摆放盒模型元素。所有的层都可以用一个整数( z 轴顺序)来表明当前层在 z 轴的位置。数字越大，元素越接近观察者。Z 轴顺序用 CSS 的 z-index属性来指定。

当没有元素包含z-index属性时，元素按照如下顺序堆叠（从底到顶顺序）：

示例链接

对于浮动的块元素来说，层叠顺序变得有些不同。浮动块元素被放置于非定位块元素与定位块元素之间：

示例链接

可以看到非定位块元素DIV#4的背景与边框丝毫不会受到浮动块元素DIV#2的影响，但内容却受到影响。

所以上面的层叠顺序我们可以改成：

1.根元素的背景与边框
2.位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠
3.浮动块元素
4.常规流中的后代行内元素
5.后代中的定位元素按照它们在 HTML 中出现的顺序层叠

我们可以把它理解成“层叠”，每个层都有一个顺序数，顺序数大的层在上面，小的在下面。

z-index只对指定了position属性的元素有效。

当没有指定z-index的时候，所有元素都在会被渲染在默认层(0层)
当多个元素的z-index属性相同的时候(在同一个层里面)，那么将按照不含z-index的堆叠进行布局。

什么是层叠上下文？

mdn中这样解释：

假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开， 层叠上下文就是对这些 HTML 元素的一个三维构想。

如何产生层叠上下文？

文档中的层叠上下文由满足以下任意一个条件的元素形成：

文档根元素（<html>）；
position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
flex (flexbox) 容器的子元素，且 z-index 值不为 auto；
grid (grid) 容器的子元素，且 z-index 值不为 auto；
opacity 属性值小于 1 的元素（参见 the specification for opacity）；
mix-blend-mode 属性值不为 normal 的元素；
以下任意属性值不为 none 的元素：
transform
filter
perspective
clip-path
mask / mask-image / mask-border
isolation 属性值为 isolate 的元素；
-webkit-overflow-scrolling 属性值为 touch 的元素；
will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；
contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

总结

1.层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。
2.每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
3.每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。

关注