CSS学习记录之position
此篇文章为我记录学习HTML过程的的笔记，如果有什么不对的地方请大家在下面指出。
作用: 将一个父div里面的多个不规律的子div定位
我在写HTML的时候回遇到在一个div里面有许多的子div，而且这些div是没有什么太大的规律，这时候我就会用到position属性对他们进行定位，当然在其他的地方也会用到position属性。
一，简介与用法
Position 有3个参数 :static absolute relative
1.Static： 普通定位遵循HTML原有的定位规则（一般也不会写）。
2.Absolute：绝对定位 有这个属性的div会更具它的父div进行定位
3.Relative ：相对定位 有这个属性的div会根据他原来的位置进行定位
二，代码应用实例
代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="author" content="http://www.cnblogs.com/jiavv5/" /> 6 <title>绝对定位于相对定位（坠星）</title> 7 </head> 8 <style> 9 #div1{ 10 margin:0 auto; 11 position: relative; 12 width:500px; 13 height: 500px; 14 background: red; 15 16 } 17 #div2{ 18 width: 100px; 19 height:100px; 20 background-color:green; 21 position: absolute; 22 top: 100px; 23 left:100px; 24 25 } 26 27 </style> 28 <body> 29 <div id="div1""> 30 <div id="div2"></div> 31 </div> 32 33 </body> 34 </html>
效果
可以看到，上面的小的绿色的div是根据在的红色的div确定的。，然后我有对其他的一些属性进行修改并测试。
总结：
1.据对定位的父元素必须是相对定位（relative）不然就会会根据总的div进行定位。
2当一个div的position属性为absolute时，他的float属性无效，
3当一个div可以绝对定位之后 left 与right top与bottom 只能出现一个。
4.其div具体位置会受到margin属性的影响，但是不会受到padding与border的影响。
相关阅读
CSS position绝对定位absolute relative http://www.divcss5.com/rumen/r403.shtml
HTML中relative和absolute解释 http://blog.csdn.net/sir_lucifer/article/details/4567630
如需转载，请注明文章出处和来源网址： http://www.cnblogs.com/jiavv5/articles/5183211.html
949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
