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，则需要将父容器设置为具有相对位置。这确保了子元素将使用它的顶部和左边来确定它们的位置。这个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;
}

这个小提琴就是一个视觉例子：http://jsfiddle.net/7CL54/

Answer 2

如果我理解正确，您想将.line1放在.inhalt内？

如果是这样，相对地定位.inhalt，而不是绝对位置（你已经拥有）.line1 div。

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

Answer 3

如果你试图将它设置在它之上，就像你在标题中所说的那样使用：

<强> 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;">

Answer 4

如果您希望.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;
}

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

4 个答案: