html - 在其他 div 后面显示

Question

我有一个 <div> (父级，例如 100px x 100px)和其他 <div> s(子级，例如 4 个 50px x 50px 的正方形)在父级内部。

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

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

<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;
}