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 属性的值。

实例操作

static1

fix1

relative1

inherit1

static2

absolute1

---

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属性，让所有元素显示在一行里面，更加直观，下面对其分别说明：

1. 两个红色的static为默认position属性;
2. 绿色的fix1父元素为static1,但因为是固定定位，所以跑到了浏览器的最右边；
3. 蓝色的relative1在原来正常流中左边和上边分别偏移了100px;
4. 黑色的inherit1继承了relative1的position属性,即还是relative，并top和right各偏移了100px;
5. 紫色的absolute1可能需要特别留意，从html中可以看到，其父元素本来是static2,但static2是静态定位，所以absolute1最终相对于content定位。这里absolute和relative1的top都是100px，但absolute的位置要比relative1高一点，实际高10px，难道是因为content的margin问题，这里只能这样猜测了。

总结

  通过上面的实例，只要把position的这几个属性放在一起对比，还是能很好理解不同属性之间的差异，帮助我们快速掌握。

作者：飞路
出处： http://www.cnblogs.com/haizhideng/
关于作者：一名默默无闻的码农，热爱编程，如有问题或建议，请多多赐教！
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。