CSS 定位 - 绝对/相对/？答案

【问题标题】：CSS Positioning - Absolute/Relative/?CSS 定位 - 绝对/相对/？
【发布时间】：2012-07-30 00:28:22
【问题描述】：

问题与这里的小提琴有关：http://jsfiddle.net/k3QAC/1/我和我的朋友正在做一个项目

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

<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 标签上时，我希望

标签显示在完全相同的位置。如，如果您有超过 section#1 h3，则 p 标签从顶部开始显示。如果您将鼠标悬停在第 #2 h3 部分，则 p 标签显示在完全相同的位置。与第 3 节 h3 相同。

【问题讨论】：

标签： css css-position

【解决方案1】：

如果您希望可见段落始终出现在页面顶部，在标题列表旁边，您希望在p 标签上使用position: absolute;，并在@987654326 之外使用top: 0; @ 您不会在 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/

【讨论】：

是否可以在不调整HTML的情况下完成Demo 2？
@mcranston18 是的，但是您必须对段落应用固定高度或使用 javascript 动态设置每个段落的顶部偏移量，以便它们不会重叠。如果您可以编辑标记，那肯定是最简单且推荐的解决方案
谢谢杰克。我不编辑标记的唯一原因是因为我正在做一个类似于 CSS Zen Garden 的活动，其中 HTML 必须保持完整。

【解决方案2】：

如果我的理解正确，请尝试this updated Fiddle。 p 标签是 section 的子标签，因此需要相对定位的是 section，而不是标题。

【讨论】：

【解决方案3】：

或者：http://jsfiddle.net/k3QAC/2/

【讨论】：