CSS 定位 - 绝对/相对/？

Question

问题与这里的 fiddle 有关:http://jsfiddle.net/k3QAC/1/我和我的 friend 正在做一个元素

我有三个相同的部分标签，如下所示:

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

当您将鼠标悬停在我的 Fiddle 中的任何 H3 标签上时，我希望 < p > 标签显示在完全相同的位置。就像，如果你有 section#1 h3，p 标签显示从顶部开始。如果将鼠标悬停在#2 h3 部分上，p 标签会显示在完全相同的位置。与第 3 节 h3 相同。

Answer 1

如果您希望可见段落始终出现在页面顶部，标题列表旁边，您需要在 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/