CSS相对定位、绝对定位之我见
2015-07-22 18:30
501 查看
对于相对定位和绝对定位,可能很多新手都没弄清楚。这几天因为项目原因一直在做CSS布局,看了一下《CSS权威指南》,并且有大神指导,对其才略知一二。
先说相对定位吧,相对定位主要是要理解“相对”二字,相对是相对谁而言的?这个问题搞清楚了,其实对相对定位就理解了一半。"相对"是相对自己而言。怎么理解是相对自己呢,在我看来,可以把元素不用相对定位出现的位置称为初始位置,在使用了相对定位后,如果设置了left/top不为0的话,比如设置left为20,那么该元素现在的位置的左边就距该元素初始位置为20px。“相对"就是这么理解的。至于具体的参数的意义,我就不详谈了,我觉得只要理解”相对“两个字,那么对于相对定位也会用了。参数不会可以查手册。
对于绝对定位,它参照的对象就是离自己最近的已经定位的祖先元素(这里定位只能是absolute或者relative),然后left和top等属性就是相对于该祖先元素而言的。绝对定位的话它会被从文档流中拖出,我们可以把没使用绝对定位的位置称为初始位置,那么使用绝对定位后,元素拖出文档流后它的初始位置就会被别的元素占用。而对于相对定位来说,它自己走了,但是位置还在那里,并没有元素能占用。
还有一点,我感觉如果说从层次来看,没使用定位<绝对定位<相对定位,就是说高层次的元素可能覆盖低层次的元素。这一点其实也是挺有用也是值得注意的。
此外还有两种定位static和fixed,这两个比较容量懂,所以就不多说了。
以上都是自己学习和使用的时候的想法,如果有不恰当的地方,还望指出一起进步
先说相对定位吧,相对定位主要是要理解“相对”二字,相对是相对谁而言的?这个问题搞清楚了,其实对相对定位就理解了一半。"相对"是相对自己而言。怎么理解是相对自己呢,在我看来,可以把元素不用相对定位出现的位置称为初始位置,在使用了相对定位后,如果设置了left/top不为0的话,比如设置left为20,那么该元素现在的位置的左边就距该元素初始位置为20px。“相对"就是这么理解的。至于具体的参数的意义,我就不详谈了,我觉得只要理解”相对“两个字,那么对于相对定位也会用了。参数不会可以查手册。
对于绝对定位,它参照的对象就是离自己最近的已经定位的祖先元素(这里定位只能是absolute或者relative),然后left和top等属性就是相对于该祖先元素而言的。绝对定位的话它会被从文档流中拖出,我们可以把没使用绝对定位的位置称为初始位置,那么使用绝对定位后,元素拖出文档流后它的初始位置就会被别的元素占用。而对于相对定位来说,它自己走了,但是位置还在那里,并没有元素能占用。
还有一点,我感觉如果说从层次来看,没使用定位<绝对定位<相对定位,就是说高层次的元素可能覆盖低层次的元素。这一点其实也是挺有用也是值得注意的。
此外还有两种定位static和fixed,这两个比较容量懂,所以就不多说了。
以上都是自己学习和使用的时候的想法,如果有不恰当的地方,还望指出一起进步
相关文章推荐
- CSS:选择器
- css3 transition 实现图片放大缩小
- css关系选择符
- 30个值得收藏的CSS代码片段
- 纯css切换左侧菜单
- 如何处理CSS3属性前缀
- 个人学习css的真实经验
- CSS中背景图片定位
- 常用css缩写
- CSS3中动画属性transform、transition 和 animation
- css 圆角写法
- 关于:after和:before伪类的用法,以及让浮动占据高度问题。
- 对于heml和css的粗浅见解
- 备忘篇——css在模块不固定大小又没有内容的时候如何显示背景图片
- 经验分享:CSS浮动(float,clear)通俗讲解
- CSS代码实现鼠标移过更换背景图片
- CSS3 鼠标经过缩放效果
- css通过特殊性解决样式冲突
- CSS入门学习(转)
- 样式表写法