Question

我在父母内部有一个<div>（父母，例如100px x 100px）和其他<div> s（儿童，例如四个50px x 50px的正方形）。

<div id="parent">
  <div id="ch1">...</div>
  <div id="ch2">...</div>
  ...
</div>

孩子们完全填满了父母。现在，我想在父级中显示和隐藏文本，但我希望它显示在后面的子项中。如果我这样做：

<div id="parent">TEXT <div id="ch1">...</div> <div id="ch2">...</div> ... </div>

它打破了孩子们的布局。 z-index: -1不起作用。知道怎么解决吗？

Answer 1

CSS：

#parent{
    position:relative;
}

#ch1{
    position:absolute;
    top:0;
    left:0;
}

#ch2{
    position:absolute;
    top:0;
    left:50px;
}

#ch3{
    position:absolute;
    top:50px;
    left:0;
}

#ch4{
    position:absolute;
    top:50px;
    left:50px;
}

Answer 2

虽然可以使用绝对位置定位每个内部div，但我更有意义的是绝对定位文本而不是框。考虑：

<强> HTML

<div id="parent"><span>Text</span>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

<强> CSS

#parent{
    width:105px;
    height:105px;
    border:1px solid blue;
    margin:0;
    padding:0;
    position:relative;
}

#parent div{
    width:50px;
    height:50px;
    border:1px solid red;
    float:left;
}

#parent span{
    position:absolute;
    top:0;
    left:0;
}

工作演示：http://jsfiddle.net/Eqd4j/

这种方法可能比将每个子div设置为绝对定位更灵活。

Answer 3

单向 - 使用绝对定位。

在其他div </div>后面显示<div>

3 个答案: