CSS学习笔记-position
相信每一个前端新手都碰到过很头疼的问题，明明是把元素定位到这个位置，效果出来后却跑到了那个位置，设置其周围偏移后也没反应，感觉心好累。position属性定义建立元素布局所用的定位机制，只有把它整明白，定位的时候才能心想事成。
position可能的值
1.固定定位(fix) 相对于浏览器窗口定位，元素脱离正常流，元素的位置通过 "left", "top", "right" , "bottom" 和"z-index"属性进行规定。并且元素会生成一个块级框，而不论该元素本身是什么类型。
2.绝对定位(absolute) 相对于 static 定位以外的第一个父元素进行定位，元素脱离正常流。元素的位置通过 "left", "top", "right" , "bottom" 和"z-index" 属性进行规定。并且元素会生成一个块级框，而不论该元素本身是什么类型。
3.相对定位(relative) 相对于其正常文档流位置进行定位。元素在正常流中，其位置通过 "left", "top", "right" , "bottom" 和"z-index" 属性进行规定。因此，"left:20px" 会向元素原来位置右偏20px,由于相对定位元素未脱离正常流，刚才偏移的20px区间内没有任何内容。
4.静态定位(static) 默认值。没有定位，元素出现在正常的流中，忽略 top, bottom, left, right 或者 z-index 声明。
5.继承定位(inherit) 直接从父元素继承 position 属性的值。
实例操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<title></title>
</head>
<body>
<div class="content">
<div id="staticdiv1">
<span>static1</span>
<div id="fixdiv1">
<span>fix1</span>
</div>
</div>
<div id="relativediv1">
<span>relative1</span>
<div id="inheritdiv1">
<span>inherit1</span>
</div>
</div>
<div id="staticdiv2">
<span>static2</span>
<div id="absolutediv1">
<span>absolute1</span>
</div>
</div>
</div>
</body>
</html>
div{
float: left;
}
.content{
position: relative;
width: 600px;
height: 300px;
padding: 10px;
background-color: lightgray;
color: white;
font-size: 16px;
font-weight: bold;
}
#staticdiv1,#staticdiv2{
width: 200px;
height: 200px;
background-color: red;
}
#fixdiv1{
position: fixed;
top: 10px;
right: 100px;
width: 200px;
height: 200px;
background-color: green;
}
#relativediv1{
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: blue;
}
#absolutediv1{
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: purple;
}
#inheritdiv1{
position: inherit;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: black;
}
上图是Chrome中看到的实际效果，所有div都添加了float属性，让所有元素显示在一行里面，更加直观，下面对其分别说明：
- 两个红色的static为默认position属性;
- 绿色的fix1父元素为static1,但因为是固定定位，所以跑到了浏览器的最右边；
- 蓝色的relative1在原来正常流中左边和上边分别偏移了100px;
- 黑色的inherit1继承了relative1的position属性,即还是relative，并top和right各偏移了100px;
- 紫色的absolute1可能需要特别留意，从html中可以看到，其父元素本来是static2,但static2是静态定位，所以absolute1最终相对于content定位。这里absolute和relative1的top都是100px，但absolute的位置要比relative1高一点，实际高10px，难道是因为content的margin问题，这里只能这样猜测了。
总结
通过上面的实例，只要把position的这几个属性放在一起对比，还是能很好理解不同属性之间的差异，帮助我们快速掌握。
浙公网安备 33010602011771号