gpt4 book ai didi

html - 如何打破两个定位的顶部元素?

转载 作者:行者123 更新时间:2023-11-28 02:13:53 24 4
gpt4 key购买 nike

我有两个元素都位于顶部 0px 处。但是,两者相互重叠,我想在不改变它们的位置属性的情况下将它们分开。

h2 {
position: fixed;
left: 100px;
top: 0px;
}

p {
position: absolute;
left: 100px;
top: 0px;
}
<!DOCTYPE html>
<html>

<body>

<h2>This is a heading with a fixed position</h2>
<p>This is a paragraph with an absolute position</p>

</body>

</html>

最佳答案

一个想法是添加一个 top段落的值,因此它位于标题下方。

h2 {
position: fixed;
left: 100px;
top: 0;
}

p {
position: absolute;
left: 100px;
top: 50px;
}
<h2>This is a heading with a fixed position</h2>
<p>This is a paragraph with an absolute position</p>

但是,如果标题足够长以换行,段落的位置将不会相应调整,文本将再次开始重叠。

虽然您提到您不想更改元素的 position ,但更灵活的方法可能是将元素包装在单个容器中并绝对(或固定)定位该容器:

#container {
position: absolute;
left: 100px;
top: 0;
}
<div id="container">
<h2>This is a heading that might have enough text to wrap to another line</h2>
<p>This is a paragraph</p>
</div>

关于html - 如何打破两个定位的顶部元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48592322/

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