CSS：体验元素堆叠效果

马黑黑

web页里，两个或两个以上的元素在相同的位置上出现的现象被称为元素堆叠。我们这里所关心的，是元素位置相同或彼此间位置有重合时，它们是如何相互影响的，也就是，本帖要达成的目的是，弄清楚元素在z轴的展现谁在前谁在后的问题。

为了方便比较，我们需要堆叠的元素放置在一个有定位的父容器中，父容器不参与位置对比。然后我们设置两个背景色不同的并列子div并令其绝对定位于相同点之上。

<style type="text/css">

/* 父容器：比武战场 */

.wuBox {

margin: 0 auto;

padding: 10px;

width: 300px;

min-height: 300px;

position: relative;

border: 1px solid;

}

/* 武松 */

.wusong {

position: absolute;

width: 200px;

height: 200px;

left: 0;

top: 0;

background: olive;

}

/* 武大 */

.wuda {

position: absolute;

width: 100px;

height: 100px;

left: 0;

top: 0;

background: tomato;

}

</style>

CSS搭好台了，HTML开始上映：

<div class="wuBox">

<div class="wusong">武松</div>

<div class="wuda">武大</div>

</div>

效果如下：

武松

武大

看效果，两人都挂着胸牌和背牌上场的，牌子现在见武大的，武松躲在了大哥的背后。为啥？这是代码流使然：代码后出现的元素离观众席更近。有的菇凉只崇拜武松，嫁人就不能嫁武大这样的人，所以不愿意让武松被挡住，怎么办？不用调整位置，只需给武松的CSS加入一个 z-index 属性，给它赋个值，如 z-index:999 这样的，数字越大，该元素就越靠前，在z轴之上离观众席就越近。为了保险起见，也给武大一个 z-index 值，比如 z-index:-1 这样的（当然也不用那么夸张，998就可以了），他就永远躲在了弟弟的后面：

代码：

<div class="wuBox">

<div class="wusong" style="z-index:999;">武松</div>

<div class="wuda" style="z-index:-1;">武大</div>

</div>

效果：

武松

武大

这里需要特别注意：z-index只作用于设置了position属性的元素。另外，如果父容器也设置更高的z-index值，是不是武家两兄弟都只能待在台后？不会，父元素不和子元素抢地盘，它只给子容器提供地盘，它的z-index值针对的是它和它的子元素之外的元素。

红影

黑黑讲得真清楚，谢谢黑黑带来的好教材

红影

z-index可以直接放在容器那里么?

红影

"这是代码流使然：代码后出现的元素离观众席更近。"
这句也挺好，我也需要记住的。
黑黑的语言依旧那么幽默

红影

把它们这样叠一下看看效果

武松

武大

现在再给武大一个负值看看

武松

武大

红影

我想让武大和武松搭到一半的位置看效果，为什么设置left没用
我就想看看设置负值会不会被父容器吞没，就那么难么。

马黑黑

红影 发表于 2022-1-25 10:29
z-index可以直接放在容器那里么?

当然可以。本帖第二个例子不在重新写CSS代码，所以在HTML中嵌入

马黑黑

红影 发表于 2022-1-25 10:50 我想让武大和武松搭到一半的位置看效果，为什么设置left没用

有用的，看下面的代码，武松往右移50px，武大就可以漏半边脸了。不过论坛里不行，需要去掉z-index设置：

<div class="wuBox">

<div class="wusong" style="left:50px;z-index:999;">武松</div>

<div class="wuda" style="z-index:-1; ">武大</div>

</div>

武松

武大

红影

马黑黑 发表于 2022-1-25 10:57
本帖最后由 马黑黑 于 2022-1-25 11:01 编辑

有用的，看下面的代码，武松往右移50px，武大就可以漏半 ...

我是在css里移动的，想移动武大。貌似动不了，我都给到800以上了，还是行。
css里可以设置位置的吧，必须在HTML里设置的么。

马黑黑

红影 发表于 2022-1-25 11:17
我是在css里移动的，想移动武大。貌似动不了，我都给到800以上了，还是行。
css里可以设置位置的吧，必 ...

看代码顺序。比如关于武大的位置，之前设置为 left: 0; 的，你想改，可以直接改它，也可以在它之后重新定义 left 值。最后定义的覆盖前面设定的。

红影

马黑黑 发表于 2022-1-25 13:09
看代码顺序。比如关于武大的位置，之前设置为 left: 0; 的，你想改，可以直接改它，也可以在它之后重新定 ...

我就是改的之前的 left: 0; 的，好像没什么作用。

马黑黑

红影 发表于 2022-1-25 14:22
我就是改的之前的 left: 0; 的，好像没什么作用。

除了 0 以外，要加 px ，如 1px 是有效的，1 是无效的

红影

马黑黑 发表于 2022-1-25 20:36
除了 0 以外，要加 px ，如 1px 是有效的，1 是无效的

原来如此，哈哈，看把我笨的。嗯，现在移动过来了。你看5楼，实际给武大-1的时候，武大就不见了。
是跑到父容器后面了么，你不是说父容器不分儿子抢地盘的么。

马黑黑

红影 发表于 2022-1-25 21:44
原来如此，哈哈，看把我笨的。嗯，现在移动过来了。你看5楼，实际给武大-1的时候，武大就不见了。
是跑 ...

它不抢不意味着孩子不可以躲到它后面

小辣椒

黑黑的教学真的既风趣，又讲的道理很通透，特别赞！

马黑黑

小辣椒 发表于 2022-1-25 23:00
黑黑的教学真的既风趣，又讲的道理很通透，特别赞！

这里说的都是基本功，要能领会最好