25

我有一个问题，我不知道如何纠正这个问题。我想要的是“红色框”保持在 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>
4

4 回答 4

20

您很可能不需要 z-index 来执行此操作。您可以使用相对定位和绝对定位。

我建议您更好地了解 css 定位以及相对定位和绝对定位之间的区别......我看到您正在设置position: absolute;一个元素并试图浮动该元素。它不会工作的朋友！当您了解 CSS 中的定位时，您的工作会轻松很多！;)

编辑：为了清楚起见，定位不是他们的替代品，我确实使用z-index. 我只是尽量避免使用它们。开始使用z-indexes无处不在似乎很容易和有趣......直到您遇到与它们相关的错误并发现自己不得不重新访问和管理z-indexes.

于 2012-05-08T22:10:31.780 回答
12

您可以将样式放在容器 div 菜单中：

<div style="position:relative; z-index:10">
   ...
   <!--html menu-->
   ...
</div>

前 在此处输入图像描述

后

在此处输入图像描述

于 2015-05-21T07:43:09.647 回答
2 
#right { 
  background-color: red;
  height: 300px;
  width: 300px;
  z-index: 9999;
  margin-top: 0px;
  position: absolute;
  top:0;
  right:0;
}

位置：绝对；顶部：0；对：0；在这里工作！:) 还要去掉浮动！

于 2012-05-08T22:07:43.810 回答
2

好的，我假设你想把 .left 放在容器中，所以我建议你编辑你的 html。关键是position:absolute和right:0

#right { 
    background-color: red;
    height: 300px;
    width: 300px;
    z-index: 999999;
    margin-top: 0px;
    position: absolute;
    right:0;
}

这是完整的代码：http: //jsfiddle.net/T9FJL/

于 2012-05-08T22:19:16.903 回答