CSS定位 - 絕對/相對/？

問題涉及到這個小提琴這裏：http://jsfiddle.net/k3QAC/1/我和朋友們正在做一個項目CSS定位 - 絕對/相對/？

我有三個相同的部分標記，看起來像這樣：

<section id="1"> 
<h3>This is a heading.</h3> 
<p>This is 1 of 1 p tags.</p> 
<p>This is 1 of 2 p tags.</p> 
<p>This is 1 of 3 p tags.</p> 
</section> 
<section id="2"> 
<h3>This is a heading.</h3> 
<p>This is 1 of 1 p tags.</p> 
<p>This is 1 of 2 p tags.</p> 
<p>This is 1 of 3 p tags.</p> 
</section> 
<section id="3"> 
<h3>This is a heading.</h3> 
<p>This is 1 of 1 p tags.</p> 
<p>This is 1 of 2 p tags.</p> 
<p>This is 1 of 3 p tags.</p> 
</section>

當你將鼠標懸停在任何在H3標籤我的小提琴，我想< p>標籤顯示在完全相同的位置。如果你已經完成了第一節h3的話，那麼p標籤顯示從頂部開始。如果您將鼠標懸停在第2節h3上，則p標籤顯示在完全相同的位置。與＃3 h3部分相同。

來源

2012-07-29 mcranston18

如果你想可見段落總是出現在頁面的頂部，旁邊標題的列表，你想在p標籤使用position: absolute;，並且除了使用top: 0;到left: 25%;您不會使用任何定位在section標籤上，以便段落與文檔相關。如果你寧願顯示有關段落的section，只需添加position: relative;到section標籤

section p { 
    position:absolute; 
    left:25%; 
    top: 0; 
    width:75%; 
    display: none; 
}

演示1：http://jsfiddle.net/qemuK/

然而，您的規則section h3:hover + p將只適用於第一個段落後的h3:hover 。按照設計，每個部分的第2和第3段將始終隱形。要顯示所有三個段落，您需要將它們包裝在另一個元素中，並顯示/隱藏該元素，而不是段落本身。

<section> 
    <h3> This is a heading</h3> 
    <div class="paragraphs"> 
    <p>1 1 This is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id tortor nulla, in placerat ligula. Fusce magna turpis, consequat ut tempus quis, elementum varius</p> 
    <p>1 2 This is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id tortor nulla, in placerat ligula. Fusce magna turpis, consequat ut tempus quis, elementum varius</p> 
    <p>1 3 This is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id tortor nulla, in placerat ligula. Fusce magna turpis, consequat ut tempus quis, elementum varius</p> 
    </div> 
</section>

而CSS：

section .paragraphs { 
    position:absolute; 
    left:25%; 
    top: 0; 
    width:75%; 
    display: none; 
} 

section h3:hover + .paragraphs { 
    display:block; 
}

演示2：http://jsfiddle.net/YcDuu/

來源

2012-07-29 15:26:55 jackwanders

非常感謝徹底的答案。現在很清楚:) – mcranston18 2012-07-29 23:32:07

是否可以在不調整HTML的情況下完成Demo 2？ – mcranston18 2012-07-29 23:43:07

@ mcranston18是的，但是您必須對段落應用固定高度，或者使用javascript來動態設置每個段落的頂部偏移量，以使它們不重疊。如果你可以編輯你的標記，這肯定是最簡單的和推薦的解決方案 – jackwanders 2012-07-30 00:37:14