style ="position:absolute"和style ="position:relative"之间的区别
在将其添加到//元素的情况下,任何人都可以告诉我它们之间的区别style = "position:absolute"和style = "position:relative"它们之间的区别吗？divspaninput
我现在正在使用absolute,但我也想探索relative.这将如何改变定位？
Age*_*rum 168
绝对定位意味着元素完全脱离页面布局的正常流程.就页面上的其他元素而言,绝对定位的元素根本不存在.然后,元素本身被单独绘制,在其他所有内容的"顶部",在您使用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的间隙.
希望能澄清一点事情.
好吧，这里的答案很明显...基本上相对位置是相对于上一个元素或窗口的，而绝对不关心其他元素，除非您使用顶部和左侧，否则它是父元素...
查看我为您创建的示例以显示差异...
您也可以使用我为您创建的css来查看它的运行情况，您可以看到绝对位置和相对位置的行为：
.parent {
display: inline-block;
width: 180px;
height: 160px;
border: 1px solid black;
}
.black {
position: relative;
width: 100px;
height: 30px;
margin: 5px;
border: 1px solid black;
}
.red {
width: 100px;
height: 30px;
margin: 5px;
top: 16px;
background: red;
border: 1px solid red;
}
.red-1 {
position: relative;
}
.red-2 {
position: absolute;
}<div class="parent">
<div class="black">
</div>
<div class="red red-1">
</div>
</div>
<div class="parent">
<div class="black">
</div>
<div class="red red-2">
</div>
</div>