HTML - Css：z-index不使用相对位置
[英]HTML - Css : z-index not working with relative positions
问题描述
我知道z-index需要div定位。
然后，我不知道为什么它在我的情况下不起作用：
html { height: 100%; } body { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #signDiv { position: relative; z-index: -1; width: 100%; height: 100%; } #infoDiv { position: relative; width: 100%; height: 100%; z-index: 10; }
<body> <div id="signDiv"> ... </div> <div id="infoDiv"> ... </div> </body>
这两个div不是叠加的，一个解决方案？
非常感谢你
2 个解决方案
解决方案1
2 已采纳 2016-08-18 02:15:08
你在一个元素上声明一个位置会使其z-index属性启动是正确的。但是在你的例子中，由于HTML中元素的顺序， infoDiv默认情况下已经排在最前面了。 z-index的。 你甚至不需要z-index。
你需要的是将他们的位置设置为absolute而不是relative 。
类似的东西： http ： //codepen.io/memoblue/pen/xOBBxK
解决方案2
0 2016-08-18 06:25:09
html { height: 100%; } body { margin: 0px; padding: 0px; } #signDiv { position: absolute; z-index: -1; width: 100%; height: 100%; } #infoDiv { position: absolute; width: 100%; height: 100%; z-index: 10; }
<body> <div id="signDiv"> ...1 </div> <div id="infoDiv"> ...2 </div> </body>
CSS - Z-index不适用于相对和绝对的头寸
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.