html - 如何在 div 上设置 div？- z-索引

Question

我的 CSS 有问题

<div id="all-letter2" style="margin-left:40px; margin-right:57px;">
   <div class="inhalt" style="font-size:17px;">
      <div class="line1" style="position: absolute; margin-left:-80px; width:30px; color:gray;   height:10px; font-size:22px; font-weight:470; margin-top:-590px;z-index:10;">_

    </div>    
  </div>
</div>

class="line1">我该如何设置class="inhalt"？z 指数？

Answer 1

如果您尝试使用示例中的嵌套元素来模仿http://cdn.onextrapixel.com/wp-content/uploads/2009/05/zindex.jpg，那么您需要将父容器设置为相对位置。这确保了子元素将使用它的顶部和左侧边缘来确定它们的位置。这个列表是一篇文章，在描述原因方面做得很好。所以html是：

<div id="all-letter2">
   <div class="inhalt">
      <div class='line1'></div>
   </div>
</div>

你的CSS将是：

#all-letter2
{
    height:30px;
    width:30px;
    background:orange;
    position:relative;
    top:10px;
    left:10px;
}
.inhalt
{
    height:30px;
    width:30px;
    background:blue;
    position:absolute;
    top: 10px;
    left:10px;
}
.line1
{
    height:30px;
    width:30px;
    background:green;
    position:absolute;
    top:10px;
    left:10px;
}

这个小提琴中有一个视觉示例：http: //jsfiddle.net/7CL54/

Answer 2

如果我理解正确，你想放在.line1里面.inhalt吗？

如果是这样，.inhalt则相对定位，而不是绝对定位（您已经拥有）.line1div。

<div class="inhalt" style="font-size:17px; position: relative;">

Answer 3

如果你想.line1在下面inhalt那么你可以将它们绝对定位到all-letter2.

CSS

#all-letter2 {
  position:relative;
  margin: 0 57px 0 40px;
}

.inhalt {
  position:absolute;
  top:0;
  left:0;
  z-index:2;
}
.line {
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}

Answer 4

如果您尝试将其设置在它之上，只需使用您在标题中所说的：

CSS

.inhalt {
position: relative;
z-index: 1000;
}
.line1 {
position: relative;
z-index: 2000;
}

HTML

<div class="inhalt" style="font-size:17px;"></div>

<div class="line1" style="font-size:17px;">