码迷,mamicode.com
首页 > Web开发 > 详细

css 元素定位样式

时间:2014-05-31 01:36:40      阅读:291      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   a   os   div   

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

css 定位: position
static : 默认静止定位,元素在正常的文档流中无法移动定位。
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>

css 元素定位样式,布布扣,bubuko.com

css 元素定位样式

标签:c   style   class   a   os   div   

原文地址:http://www.cnblogs.com/zbseoag/p/3761859.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!