style = "position:absolute"
和style = "position:relative"
之间的区别,以及它们在将其添加到div
/span
/input
元素时有何不同?我现在正在使用
absolute
,但我也想尝试一下relative
。这会如何改变定位?style = "position:absolute"
和style = "position:relative"
之间的区别,以及它们在将其添加到div
/span
/input
元素时有何不同?absolute
,但我也想尝试一下relative
。这会如何改变定位?绝对定位意味着元素完全脱离了页面布局的正常流程。就其余页面元素而言,绝对定位的元素根本不存在。元素本身被独立绘制,有点像“置于”其他所有内容之上,在您使用left、right、top和bottom
属性指定的位置上。
使用这些属性所指定的位置,元素将放置在其最后一个祖先元素中,该祖先元素具有任何不是static
的position属性(当未指定位置属性时,页面元素默认为静态),如果不存在此类祖先,则放置在文档主体(浏览器视口)中。
例如,如果我有以下代码:
<body>
<div style="position:absolute; left: 20px; top: 20px;"></div>
</body>
...<div>
元素将在浏览器视口顶部和左侧各偏移20像素。
然而,如果我像这样做:
<div id="outer" style="position:relative">
<div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
</div>
如果我们设置了 position:relative
,那么内部的 div
将会距离外层的 div
顶部和左侧分别为 20 像素。因为我们已经明确地将其设置为使用 position:relative
,所以外层的 div
不是使用 position:static
定位。
而相对定位则就像没有设置定位一样,不过 left、right、top
和 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向右侧重叠5像素。Span1和Span3的位置与第一个示例完全相同,使得Span2的右侧与Span3的左侧之间留下了5像素的间隙。
希望这能够更加清晰地说明问题。
相对定位:元素创建自己的坐标轴,偏移于视口坐标轴之外的位置。它是文档流中的一部分,但位置发生了偏移。
绝对定位:元素在其父元素中搜索可用的最近坐标轴,然后通过指定相对该坐标轴的偏移量来定位。它被从文档正常流中删除。
好的,很明显的答案...基本上,相对定位是相对于前一个元素或窗口,而绝对定位不关心其他元素,除非它是父元素(如果您使用top和left)...
看看我为您创建的示例,以展示它们之间的区别...
此外,您可以查看其实际效果,使用我为您创建的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>
绝对定位是基于显示的坐标系:
position:absolute;
top:0px;
left:0px;
^ 将元素置于窗口的左上角。
相对位置是相对于元素放置的位置:
position:relative;
top:1px;
left:1px;
^ 将元素向下移动1像素,并使其距离原来的位置左侧1像素 :)
相对定位:
具有position: relative;
属性的元素相对于其正常位置定位。
如果在相对定位的元素上没有添加定位属性(top、left、bottom或right),它将不会对其位置产生任何影响。它的行为与position: static
元素完全相同。
但是,如果您添加其他定位属性,例如top: 10px;,它将从通常的位置向下移动10像素。
这种类型的定位元素受其他元素的影响,同时也会影响其他元素。
绝对定位:
具有position: absolute;
属性的元素允许您将任何元素放置在您想要的位置。使用定位属性top、left、bottom和right设置位置。
它相对于最近的非静态祖先元素定位。如果没有这样的容器,则相对于页面本身进行定位。
它被从页面中的正常元素流中移除。
这种类型的定位元素不受其他元素的影响,也不会影响其他元素的流程。
请看这个自我说明的例子以获得更好的清晰度。 https://codepen.io/nyctophiliac/pen/BJMqjX
绝对定位会将对象(div、span等)放置在绝对强制位置(通常以像素为单位确定),而相对定位会将其放置在离其正常位置一定距离的地方。例如:
position:relative; left:-20px;
如果文本在屏幕左边缘左侧20像素内,则可能使文本的左侧消失。
position: absolute
可以被放置在任何位置并保持在那里,例如 0,0。
position: relative
是相对于它最初在浏览器中放置的位置进行偏移的。
position: relative 作为父元素, position: absolute 作为相对定位的子元素。 您可以看下面的例子:
.postion-element{
position:relative;
width:200px;
height:200px;
background-color:green;
}
.absolute-element{
position:absolute;
top:10px;
left:10px;
background-color:blue;
}