将 div 放在下面两个 div 之上,可以使用 CSS 的 z-index
属性来实现。z-index
属性用于设置元素的堆叠顺序,具有较高 z-index
值的元素会覆盖具有较低 z-index
值的元素。
以下是一个简单的示例:
<!DOCTYPE html>
<html>
<head><style>
.div1 {
position: absolute;
top: 50px;
left: 50px;
background-color: red;
width: 100px;
height: 100px;
z-index: 1;
}
.div2 {
position: absolute;
top: 70px;
left: 70px;
background-color: blue;
width: 100px;
height: 100px;
z-index: 2;
}
.div3 {
position: absolute;
top: 90px;
left: 90px;
background-color: green;
width: 100px;
height: 100px;
z-index: 3;
}
</style>
</head>
<body>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</body>
</html>
在这个示例中,div3
具有最高的 z-index
值,因此它会显示在最上面。div1
具有最低的 z-index
值,因此它会显示在最下面。div2
具有中间的 z-index
值,因此它会显示在中间。
如果您希望将一个 div 放在另外两个 div 之上,只需将该 div 的 z-index
值设置为大于其他两个 div 的值即可。
请注意,z-index
属性只适用于具有定位属性(如 position: absolute
、position: relative
或 position: fixed
)的元素。如果元素未设置定位属性,则 z-index
属性不起作用。
领取专属 10元无门槛券
手把手带您无忧上云