html文本堆叠,CSS堆叠顺序

堆叠顺序

层叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。

z轴通常指用户眼睛到屏幕的一条直线。所有的元素都有层叠顺序。

.parent{

border: 30px solid rgba(255,0,0,0.4);

background: white;

width: 200px;

height: 200px;

}

首先，我们创建一个div框。

image.png

当我们试着去改变background: black,我们会发现由于背景颜色盖在边框之上，边框的颜色会有所改变。

image.png

我们试着给这个div中加个内联元素，会发现，内联元素比那个没有因为背景是黑色，而隐藏掉。

image.png

内联元素是在background之上的，所以不会被背景色覆盖掉。

接着，我们在div中再创建一个内联元素

.parent{

width: 200px;

height: 200px;

border: 30px solid red;

background: green;

font-size: 40px;

color:black;

}

.child{

height: 80px;

background: blue;

color: yellow;

}

hello

hello

image.png

我们会发现，子元素的背景色覆盖掉了父元素的背景色。然后，我们给子元素加个margin-top，子元素中的内联元素会将父元素中的文字覆盖掉。

image.png

我们继续添加一个浮动元素,同时稍微修改下子元素的样式，方便我们观察。

.child{

height: 80px;

background: black;

}

.float{

width:100px;

height: 80px;

background: blue;

float: left;

margin-left:40px;

}

给float元素加一个margin，我们可以看到，蓝色的float元素，覆盖在div之上。

image.png

我们继续添加两个div元素

.relative1{

width: 100px;

height: 100px;

background:brown;

margin-top: -90px;

}

.relative2{

width: 100px;

height: 100px;

background:orange;

margin-top: -60px;

margin-left:40px;

}

此时，我们可以看到，后出现的元素会覆盖在先出现的元素之上，但是，浮动元素仍然在顶端。

image.png

我们给两个元素都加上position。

image.png

这时，两个div都在float元素的上层。后出现的橙色元素暂时在最上面。

我们接着给.relative1加上一个z-index

.relative1{

width: 100px;

height: 100px;

background:brown;

margin-top: -90px;

position:relative;

z-index: 1;

}

.child{

height: 80px;

background: black;

z-index: 3;

}

image.png

此时.relative1就在最上层。但是我们给.child加上z-index并没有效果，因为要给定位元素加上z-index(不为auto)才能触发堆叠上下文。

总结下来就是下图所示(原谅我盗图)：

image.png