gpt4 book ai didi

CSS 定位 - 绝对/相对/?

转载 作者:太空宇宙 更新时间:2023-11-03 21:59:12 25 4
gpt4 key购买 nike

问题与这里的 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 相同。

最佳答案

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

关于CSS 定位 - 绝对/相对/?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11710355/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com