如何"z-index"使菜单始终位于内容之上
我有一个问题,我无法弄清楚如何纠正这个问题.我想要的是"红色框"在z-index 2中保留在页面顶部,而背景上的所有内容都保留在索引1上但不知何故这个代码"折叠"了图层.如果有人可以帮助我,我真的很感激.对不起我的英语不好.提前致谢.
<html>
<head>
<title></title>
<style type="text/css">
body { margin: 0; }
#container {
position: absolute;
float: right;
z-index: 1;
}
.left1 {
background-color: blue;
height: 50px;
width: 100%;
}
.left2 {
background-color: green;
height: 50px;
width: 100%;
}
#right {
background-color: red;
height: 300px;
width: 300px;
float:right;
z-index: 999999;
margin-top: 0px;
position: relative;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="left1">LEFT BLUE</div>
<div class="left2">LEFT GREEN</div>
</div>
<div id="right">RIGHT RED</div>
</body>
</html>
raf*_*ten 15
你很可能不需要z-index来做到这一点.您可以使用相对和绝对定位.
我建议你更好地了解一下css定位以及相对和绝对定位之间的区别......我看到你正在设置位置:绝对; 到一个元素并试图浮动该元素.朋友不会工作!当您了解CSS中的定位时,它将使您的工作变得更加容易!;)
- 如果您需要任何帮助,请告诉我!请记住,"绝对"定位元素将始终与其设置为"position:relative;"的父元素"相对".如果您了解这一点,它将帮助您使用绝对定位元素.祝你的项目好运! (4认同)
- 对不起,但是低估了.这有什么样的答案？它太宽泛了.定位不是z-index的替代品.在某些情况下可能不需要它,但如果某些元素需要被其他元素覆盖,那么z-index绝对是其中一种方法.将position:absolute与更高的z-index值组合起来并不罕见. (4认同)
你可以把样式放在容器div菜单中:
<div style="position:relative; z-index:10">
...
<!--html menu-->
...
</div>
之前
后
| 归档时间： |
|
| 查看次数： |
139085 次 |
| 最近记录： |