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