Question

我是HTML的新手。我搜索z-index是否对相对定位的元素起作用，我发现它是有效的。

但问题是当我尝试不会堆叠时。

<style>
.div0{position:relative;top:0px;left:0px;width:100%;height:auto;z-index:1;}
.div1{position:relative;top:0px;left:0px;width:100%;height:auto;z-index:1;}
.div2{position:relative;top:0px;left:0px;width:100%;height:auto;z-index:2;}
</style>
</head>
<body>
<div class="div0">
    <div class="div1">Text One</div>
    <div class="div2">Text Two</div>
</div>
</body>

Fiddle

Answer 1

首先让我们重构你的CSS，你不需要width:100%;和height: auto;因为width级元素的block总是auto但是它需要整个水平空间，除非它已浮动或转向inline-block或inline并且就height而言，默认为auto因此您不需要定义它。

其次，如果您尝试将div叠加在另一个上，而不是考虑将position: absolute;用于子元素而不是position: relative;，那么如果您想坚持使用position: relative;比你需要在负面定义top值。

Demo

.div2{
    position:relative;
    left:0px;
    z-index:2; 
    top: -15px;
}

但请确保position: relative;确实更改了元素的位置，但它会在流中保留物理空间，而position: absolute;则不会。

此外，如果要对子元素应用一些相同的属性，可以使用

之类的选择器

.div0, .div1, .div2 {
   /* Common properties here */
}

.div2 {
   /* Override common properties, or you can define unique ones as well. */
}

Answer 2

将.div1和.div2的位置更新为absolute。

.div1{position:absolute;top:0px;left:0px;width:100%;height:auto;z-index:1;}
.div2{position:absolute;top:0px;left:0px;width:100%;height:auto;z-index:2;}

Answer 3

相对定位元素top＆amp; left属性从元素的当前x-y位置起作用。在这种情况下，您可以使用负顶部将div2叠加到div1上。

关于相对定位的Z指数

3 个答案: