style =“position：absolute”和style =“position：
style =“position：absolute”和style =“position：relative”之间的区别
在将其添加到/ / 元素的情况下，任何人都可以告诉我它们之间的区别style = "position:absolute"和style = "position:relative"它们之间的区别吗？divspaninput
我现在正在使用absolute，但我也想探索relative。这将如何改变定位？
拉莫斯之舞浏览 3461回答 3
3回答
-
尚方宝剑之说
绝对定位意味着元素完全脱离页面布局的正常流程。就页面上的其他元素而言，绝对定位的元素根本不存在。然后，元素本身被单独绘制，在其他所有内容的“顶部”，在您使用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的间隙。希望能澄清一点事情。 -
婷婷同学_
相对定位：元素在偏离视口坐标轴的位置创建自己的坐标轴。它是文档流程的一部分，但已转移。绝对定位：元素在其父元素中搜索最近的可用坐标轴。然后通过指定该坐标轴的偏移来定位该元素。它从文档正常流程中删除。
随时随地看视频慕课网APP
Html/CSS