Html 显示<；部门>；在其他部门后面

我有一个

（父级，如100px x 100px）和其他

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索引：-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;
}

一种方法——使用绝对定位。

虽然您可以使用绝对定位来定位每个内部div，但对我来说，绝对定位文本比定位框更有意义。考虑：

HTML

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

工作演示：

---

此方法可能比将每个子div设置为绝对定位要灵活一些。

您是否可以将子div的

z-index

设置为

2

，并将父级

z-index:1

？a将很有帮助。还有你的CSS…你所说的“我想在父对象中显示和隐藏文本”是什么意思？每当我忘记div定位时，我都会使用这句话：两个向下的投票？请不要这么残忍：）这将文本放在child div的上方，而不是像问题中所问的那样放在它们的后面。“但我希望它显示在孩子们后面”，然后只需设置z-index:-1；在跨度上。简单。

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