html - 如何在 div 上设置 div？ - z-index

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="inhalt" 上设置 class="line1">？ z-index?

Answer 1

如果你想模仿 http://cdn.onextrapixel.com/wp-content/uploads/2009/05/zindex.jpg使用示例中的嵌套元素，则需要将父容器设置为具有相对位置。这确保了子元素将使用它的顶部和左侧边缘来确定它们的位置。这list a part article在描述原因方面做得很好。 所以 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;
}

这个 fiddle 中有一个视觉示例:http://jsfiddle.net/7CL54/