position有几种，absolute和relative的区别

pitaojin

发布于 2018-05-25 16:55:31

2K0

发布于 2018-05-25 16:55:31

标签（空格分隔）：博文

position有几种，absolute和relative的区别

1.static(默认属性)，当没有给元素设置position时默认为static 2.absolute（绝对定位），相对于父级第一个设置了position属性进行定位（没有则相对于body，static除外），top，left，bottom，right均是相对于这个父元素的偏移量 3.relative（相对定位），在元素原来的位置上进行定位，top，left，bottom，right的值相当于原来位置的偏移量 4.fixed（固定定位），相对于浏览器视口的定位，不会随着滚动条的滚动而滚动，top，left，bottom，right的值相当于浏览器窗口的定位

区别

1.absolute和relative都会使元素脱离文档流，但不同的是，absolute脱离文档流后不会占用原来的位置，而relative会在原来的位置上留下一个副本占用原来文档流的位置 2.absolute的父元素设有position时，top,left,bottom,right会忽略父级元素的padding值，即始终与父级元素的左上角进行定位，且其层级会始终比父级高，无论父级设置多大的z-index，但relative的定位会受父元素padding值影响 3.absolute是以第一个设置了position的父元素或祖先元素进行定位，而relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式

其他

1.块状化使用定位的元素的display计算值就是block或table 2.破坏性脱离原始文档流 3.包裹性 absolute天然具有包裹性，即不用同时设置以下代码

div{
    display: inline-block; //没必要
    position: absolute;
}

4.当同时使用absolute和float时，会忽略float的值举个例子

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style type="text/css">
		div{
			width: 300px;
			height: 300px;
		}
		.outer{
			position: absolute;
			background-color: #F5C4C4;
			z-index: 9999;
			margin: 50px;
			float: left;  /*被忽略*/
		}
		.inner{
			position: absolute;
			background-color: #8E1818;
			left: 50px;
			top: 50px;
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner"></div>
	</div>
</body>
</html>

效果如图