关于Position属性的相关使用及踩坑

2,252 阅读4分钟

记录一下经常使用的position相关属性,以及一些关于使用中遇到的坑

  • 固定定位fixed:相对于浏览器窗口进行固定位置
position:fixed;

元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。 Fixed定位的元素和其他元素重叠。

  • 相对定位relative:相对于他原本的位置进行移动
position:relative;
top:10px;
left:20%;

如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。用top,left,right,bottom属性去改变元素的位置

  • 绝对定位absolute:相对于他的父元素进行移动
position:absolute;
  • 粘性定位sticky:先是相对于他原本的位置进行移动,然后在超出目标区域后,固定在目标位置,即先按照relative定位方式定位,然后按照fix定位方式定位。
position:sticky;

元素先按照普通文档流定位,然后相对于该元素在流中的flow root(BFC)和 containing block(最近的块级祖先元素)定位。而后,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

  • 默认定位Static:
position:Static;

默认值。没有定位,元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index 声明)。

  • inherit:
position:inherit;

规定应该从父元素继承position 属性的值。

关于position:relative absolute fixed定位和布局的踩坑心得

关于absolute定位:子元素使用absolute进行定位的时候,会一层一层地向上去找自己的父元素中有没有设置position:relative属性的父元素,如果找到了,那么所有的偏移量例如top:10px这种都是相对于父元素的位置来进行偏移,如果自己的所有父元素都没有设置position:relative,那么absolute定位的时候会相对于根元素也就是body元素来进行偏移

<html>
	<head>
		<style>
			.grandFather
			{
				width:700px;
				height:500px;
				background-color:blue;
				margin:200px auto;
			}
			.father
			{
				width:200px;
				height:100px;
				background-color:red;
			}
			.son
			{
				width:50px;
				height:50px;
				background-color:green;
			}
		</style>
	</head>
	
	<body>
		<div class="grandFather">
			<div class="father">
				<div class="son"></div>
			</div>
		</div>
	</body>
</html>

如图,我们声明了3个嵌套的div,按父元素到子元素的顺序分别取名为爷爷、爸爸、儿子,尺寸分别为700x500,200x100,50x50,设置了三个颜色之后,并且我们为了实验的效果,用margin属性将div的位置调到了浏览器的居中位置,效果如下:

现在,我们给儿子设置一个position:absolute;再让他top:30px来进行向下30px的偏移

top:30px;

我们发现,儿子并没有相对于爸爸或者爷爷向下偏移30px,而是相对于浏览器的根元素body向下偏移了30px,但是如果我们此时设置了爸爸具有position:relative属性

.father
{
	width:200px;
	height:100px;
	background-color:red;
	position:relative;
}

可见,儿子向上找到了relative的爸爸,然后相对于爸爸的位置向下偏移了30px, 如果我们把爸爸的relative去掉,设置爷爷为relative

.grandFather
{
	width:700px;
	height:500px;
	background-color:blue;
	margin:200px auto;
	position:relative;
}

可以发现,儿子仍然来到了刚才的位置,由此可见,儿子向上找,发现爸爸不是relative,再向上找,发现爷爷是relative,从而以爷爷的位置作为参考进行了偏移,只不过由于我们的爸爸和爷爷的起始位置一样,才造成了相同的效果

我们会发现position属性很多时候会改变网页的布局,并且在浏览器大小发生变化的时候不能够自适应的变化,所以下一篇文章介绍流式布局flex属性,如何实现基本的自适应布局方式。