展示<div>在其他 div 后面</div><div id="text_translate"><p>我在父級中有一個&lt;div&gt; （父級，例如 100px x 100px）和其他&lt;div&gt; （子級，例如四個 50px x 50px 的正方形）。</p><pre> &lt;div id="parent"&gt; &lt;div id="ch1"&gt;...&lt;/div&gt; &lt;div id="ch2"&gt;...&lt;/div&gt;... &lt;/div&gt;</pre><p> 孩子完全填滿了父母。 現在，我想顯示和隱藏父項中的文本，但我希望它顯示在子項<em>后面</em>。 如果我這樣做：</p><pre> &lt;div id="parent"&gt;TEXT &lt;div id="ch1"&gt;...&lt;/div&gt; &lt;div id="ch2"&gt;...&lt;/div&gt;... &lt;/div&gt;</pre><p> 它打破了孩子的布局。 z-index: -1不起作用。 知道如何解決嗎？</p></div>

Question

我在父級中有一個<div> （父級，例如 100px x 100px）和其他<div> （子級，例如四個 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

雖然您可以使用絕對 position 對每個內部 div 進行 position，但對我來說，使用 position 絕對比框更有意義。 考慮：

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

一種方法——使用絕對定位。