能不能个z-index 的例子
时间: 2024-05-03 18:18:09 浏览: 59
z-index:z-index演示
当两个 HTML 元素重叠在一起时,z-index 属性可以用来控制哪个元素显示在上层或下层。
下面是一个例子,其中蓝色的 div 元素位于红色的 div 元素上方,因为它的 z-index 值更高:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#red {
position: absolute;
background-color: red;
width: 200px;
height: 200px;
z-index: 1;
}
#blue {
position: absolute;
background-color: blue;
width: 150px;
height: 150px;
top: 50px;
left: 50px;
z-index: 2;
}
</style>
</head>
<body>
<div id="red"></div>
<div id="blue"></div>
</body>
</html>
```
在上面的代码中,我们使用了 position: absolute; 来将两个 div 元素定位到页面的特定位置,并使用 z-index 属性来控制它们在堆叠顺序中的位置。在这个例子中,蓝色的 div 元素具有更高的 z-index 值,因此它显示在红色 div 元素的上面。
阅读全文