gpt4 book ai didi

css - style = "position:absolute"和 style = "position:relative"的区别

转载 作者:数据小太阳 更新时间:2023-10-29 09:06:59 28 4
gpt4 key购买 nike

任何人都可以告诉我 style = "position:absolute"style = "position:relative" 之间的区别以及它们在我将其添加到div/span/input 元素?

我现在正在使用 absolute,但我也想探索 relative。这将如何改变定位?

最佳答案

绝对定位是指元素完全脱离页面布局的正常流程。就页面上的其余元素而言,绝对定位元素根本不存在。然后单独绘制元素本身,在您使用 left, right, top and bottom 指定的位置处在其他所有元素的“顶部”。属性。

使用您通过这些属性指定的位置,然后将该元素放置在其最后一个祖先元素中的该位置,该元素的位置属性不是 static。 (当没有指定位置属性时,页面元素默认为静态),如果不存在这样的祖先,则为文档主体(浏览器视口(viewport))。

例如,如果我有这段代码:

<body>
<div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

...<div>将位于距浏览器视口(viewport)顶部 20px 处,距其左边缘 20px 处。

但是,如果我这样做:

 <div id="outer" style="position:relative">
<div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
</div>

...然后是 inner div 将位于距 outer 顶部 20px 的位置div,和左边缘20px一样,因为outer div 未定位为 position:static因为我们已明确将其设置为使用 position:relative .

另一方面,相对定位就像声明根本没有定位一样,但是 left, right, top and bottom属性将元素“推”出它们的正常布局。页面上的其余元素仍然按照元素位于其正常位置的方式进行布局。

例如,如果我有这段代码:

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

...然后所有三个 <span>元素将彼此相邻而不会重叠。

如果我设置第二个 <span>使用相对定位,像这样:

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

...然后 Span2 将与 Span1 的右侧重叠 5px。 Span1 和 Span3 将位于与第一个示例中完全相同的位置,在 Span2 的右侧和 Span3 的左侧之间留下 5px 的间隙。

希望能澄清一些事情。

关于css - style = "position:absolute"和 style = "position:relative"的区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4457790/

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