CSS：体验元素堆叠效果
本帖最后由 马黑黑 于 2022-1-25 09:57 编辑 <br /><br /><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>
<p>web页里，两个或两个以上的元素在相同的位置上出现的现象被称为元素堆叠。我们这里所关心的，是元素位置相同或彼此间位置有重合时，它们是如何相互影响的，也就是，本帖要达成的目的是，弄清楚元素在z轴的展现谁在前谁在后的问题。</p><p><br></p><p>为了方便比较，我们需要堆叠的元素放置在一个有定位的父容器中，父容器不参与位置对比。然后我们设置两个背景色不同的并列子div并令其绝对定位于相同点之上。</p><p><br></p><p><style type="text/css"></p><p>/* 父容器：比武战场 */</p><p>.wuBox {</p><p><span style="white-space:pre"> </span>margin: 0 auto;</p><p><span style="white-space:pre"> </span>padding: 10px;</p><p><span style="white-space:pre"> </span>width: 300px;</p><p><span style="white-space:pre"> </span>min-height: 300px;</p><p><span style="white-space:pre"> </span>position: relative;</p><p><span style="white-space:pre"> </span>border: 1px solid;</p><p>}</p><p><br></p><p>/* 武松 */</p><p>.wusong {</p><p><span style="white-space:pre"> </span>position: absolute;</p><p><span style="white-space:pre"> </span>width: 200px;</p><p><span style="white-space:pre"> </span>height: 200px;</p><p><span style="white-space:pre"> </span>left: 0;<span style="white-space:pre"> </span></p><p><span style="white-space:pre"> </span>top: 0;</p><p><span style="white-space:pre"> </span>background: olive;</p><p>}</p><p><br></p><p>/* 武大 */</p><p>.wuda {</p><p><span style="white-space:pre"> </span>position: absolute;</p><p><span style="white-space:pre"> </span>width: 100px;</p><p><span style="white-space:pre"> </span>height: 100px;</p><p><span style="white-space:pre"> </span>left: 0;<span style="white-space:pre"> </span></p><p><span style="white-space:pre"> </span>top: 0;</p><p><span style="white-space:pre"> </span>background: tomato;</p><p>}</p><p></style></p><p><br></p><p>CSS搭好台了，HTML开始上映：</p><p><br></p><p><div class="wuBox"></p><p><span style="white-space:pre"> </span><div class="wusong">武松</div></p><p><span style="white-space:pre"> </span><div class="wuda">武大</div></p><p></div></p><p><br></p><p>效果如下：</p>
<div class="wuBox">
<div class="wusong">武松</div>
<div class="wuda">武大</div>
</div>
<p><br></p><p>看效果，两人都挂着胸牌和背牌上场的，牌子现在见武大的，武松躲在了大哥的背后。为啥？这是代码流使然：代码后出现的元素离观众席更近。有的菇凉只崇拜武松，嫁人就不能嫁武大这样的人，所以不愿意让武松被挡住，怎么办？不用调整位置，只需给武松的CSS加入一个 z-index 属性，给它赋个值，如 z-index:999 这样的，数字越大，该元素就越靠前，在z轴之上离观众席就越近。为了保险起见，也给武大一个 z-index 值，比如 z-index:-1 这样的（当然也不用那么夸张，998就可以了），他就永远躲在了弟弟的后面：</p><p><br></p><p>代码：</p><p><br></p><p><div class="wuBox"></p><p><span style="white-space:pre"> </span><div class="wusong" style="z-index:999;">武松</div></p><p><span style="white-space:pre"> </span><div class="wuda" style="z-index:-1;">武大</div></p><p></div></p><p><br></p><p>效果：</p>
<div class="wuBox">
<div class="wusong" style="z-index:999;">武松</div>
<div class="wuda" style="z-index:-1; ">武大</div>
</div>
<p><br></p><p>这里需要特别注意：z-index只作用于设置了position属性的元素。另外，如果父容器也设置更高的z-index值，是不是武家两兄弟都只能待在台后？不会，父元素不和子元素抢地盘，它只给子容器提供地盘，它的z-index值针对的是它和它的子元素之外的元素。</p><p></p> 黑黑讲得真清楚，谢谢黑黑带来的好教材{:4_187:} z-index可以直接放在容器那里么? "这是代码流使然：代码后出现的元素离观众席更近。"
这句也挺好，我也需要记住的。
黑黑的语言依旧那么幽默{:4_173:} <style type="text/css">
.wuBox1 {
margin: 0 auto;
padding: 10px;
width: 300px;
min-height: 200px;
position: relative;
border: 1px solid;
background: red;
}
.wusong1 {
position: absolute;
width: 150px;
height: 150px;
left: 0;
top: 0;
background: olive;
}
.wuda1 {
position: absolute;
width: 100px;
height: 100px;
left: 100px;
top: 0;
background: tomato;
}
</style>
<p>把它们这样叠一下看看效果</p><p><br></p>
<div class="wuBox1">
<div class="wusong1">武松</div>
<div class="wuda1">武大</div>
</div>
<p><br></p><p>现在再给武大一个负值看看</p><p><br></p>
<div class="wuBox1">
<div class="wusong1" style="z-index:100;">武松</div>
<div class="wuda1" style="z-index:-1; ">武大</div>
</div> 我想让武大和武松搭到一半的位置看效果，为什么设置left没用{:4_198:}
我就想看看设置负值会不会被父容器吞没，就那么难么。
红影 发表于 2022-1-25 10:29
z-index可以直接放在容器那里么?
当然可以。本帖第二个例子不在重新写CSS代码，所以在HTML中嵌入 本帖最后由 马黑黑 于 2022-1-25 11:01 编辑 <br /><br />红影 发表于 2022-1-25 10:50
我想让武大和武松搭到一半的位置看效果，为什么设置left没用
<p>有用的，看下面的代码，武松往右移50px，武大就可以漏半边脸了。不过论坛里不行，需要去掉z-index设置：</p><p><br></p><p><div class="wuBox"></p><p><span style="white-space:pre"> </span><div class="wusong" style="<font color="#ff0000">left:50px;</font>z-index:999;">武松</div></p><p><span style="white-space:pre"> </span><div class="wuda" style="z-index:-1; ">武大</div></p><p></div></p><p><br></p>
<div class="wuBox">
<div class="wusong" style="left:50px;">武松</div>
<div class="wuda">武大</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
黑黑的教学真的既风趣，又讲的道理很通透，特别赞！
这里说的都是基本功，要能领会最好
页:
[1]