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

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

固定定位fixed：相对于浏览器窗口进行固定位置

position:fixed;
复制代码

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

相对定位relative：相对于他本来的位置进行移动

position:relative;
top:10px;
left:20%;
复制代码

若是对一个元素进行相对定位，它将出如今它所在的位置上。而后，能够经过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，不管是否进行移动，元素仍然占据原来的空间。所以，移动元素会致使它覆盖其它框。用top,left,right,bottom属性去改变元素的位置浏览器

绝对定位absolute：相对于他的父元素进行移动

position:absolute;
复制代码

粘性定位sticky：先是相对于他本来的位置进行移动，而后在超出目标区域后，固定在目标位置，即先按照relative定位方式定位，而后按照fix定位方式定位。

position:sticky;
复制代码

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

默认定位Static：

position:Static;
复制代码

默认值。没有定位，元素出如今正常的流中（忽略top, bottom, left, right 或者 z-index 声明）。markdown

inherit:

position:inherit;
复制代码

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

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

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

<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的位置调到了浏览器的居中位置，效果以下：spa

如今，咱们给儿子设置一个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属性，如何实现基本的自适应布局方式。code