css 元素定位样式

CSS 元素定位样式曾经写网页，学css整体上不难，但就是元素定位，始终一知半解，直到今天，本着实践出真知的理念，经过认真测试，总结出了如下结论。

css 定位： positionstatic : 默认静止定位，元素在正常的文档流中无法移动定位。absolute :独立元素，元素从文档流中脱离,会相对于父层(static定位的父层除外)移动定位。relative : 相对定位，相对本身的位置移动定位，效果等同于相对于父层移动定位。fixed: 固定定位，相对于窗口移动定位。注:1、移动定位是指通过 top,bottom,left,right属性来移动元素位置。

2、任何元素都有相对于父层定位的特性,所以当不用方向移动定位属性,而只用 margin 定位,则必然是相对的位移。

3、absolute 是“独立的，绝对”的意思，我觉得应该是取“独立的”意义更好理解。它所达到的效果就是元素从文档流中脱离，印证了独立存在的意义。

测试结果如下（static元素就不测试）：

子元素 ( 相对于 =>) 父元素absolute => static 绝对fixed => static 绝对relative => static 相对absolute => absolute 相对fixed => absolute 绝对relative => absolute 相对absolute => relative 相对 fixed => relative 绝对relative => relative 相对absolute => fixed 相对fixed => fixed 绝对relative => fixed 相对<div class="size300_300" style="position:static; margin-left:100px;"> <div class="size100_100" style="position:absolute; top:10px; ">son</div></div>