style =“position：absolute”和style =“position：relative”之间的区别在将其添加到/ / 元素的情况下，任何人都可以告诉我它们之间的区别style = "position:absolute"和style = "position:relative"它们之间的区别吗？divspaninput我现在正在使用absolute，但我也想探索relative。这将如何改变定位？
3 回答
尚方宝剑之说
TA贡献1788条经验 获得超4个赞
绝对定位意味着元素完全脱离页面布局的正常流程。就页面上的其他元素而言，绝对定位的元素根本不存在。然后，元素本身被单独绘制，在其他所有内容的“顶部”，在您使用left, right, top and bottom属性指定的位置。
使用您使用这些属性指定的位置，然后将元素放置在其最后一个祖先元素中的位置，该元素具有除static（指定未指定位置属性时默认为静态的页面元素）或文档正文（浏览器）之外的任何位置属性viewport）如果没有这样的祖先存在。
例如，如果我有这个代码：
<body> <div style="position:absolute; left: 20px; top: 20px;"></div></body>
... <div>它将位于距浏览器视口顶部20px的位置，距离浏览器视口左侧20px。
但是，如果我做了这样的事情：
<div id="outer" style="position:relative"> <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div> </div>
...然后innerdiv将位于div顶部20px，距离outerdiv的左边缘20px，因为outerdiv没有定位，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的间隙。
希望能澄清一点事情。
婷婷同学_
TA贡献1844条经验 获得超8个赞
相对定位：元素在偏离视口坐标轴的位置创建自己的坐标轴。它是文档流程的一部分，但已转移。
绝对定位：元素在其父元素中搜索最近的可用坐标轴。然后通过指定该坐标轴的偏移来定位该元素。它从文档正常流程中删除。
- 3 回答
- 0 关注
- 3414 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消