一步一图剖析CSS中的position定位
2015-12-16 15:04
399 查看
原文地址:http://my.oschina.net/blogshi/blog/210238
在CSS布局上float和position是永远说不完的道不尽的话题,它们的应用五花八门,组合技巧千奇百怪.通常如果你不是一个很熟练的Csser,那么你对与position肯定还是一知半解,比如说我自己...
position的属性值大家应该是很熟悉的,static,absolute,relative,fixed.
这里做个demo,一步步详解position.
(1) 准备一些div,只加上背景色去区分它们,如下图.
代码:
?
(2) 首先是static,这个属性是position的默认属性.这里不多说了,因为通常设置position:static;的情况都是取消定位的.
(3) relative 是相对定位,这个相对指的是元素的正常位置,就是相对于你不加position:relative;的情况进行了如何的偏移.加完这个属性可以通过top,left,bottom,right进行位移设置.如果没有设置这些位移仅仅设置position:relative;那么元素位置不会有任何变化.
需要注意的是设置为relative的元素,它默认占有的空间还会继续被该元素占有,同时它不会影响其他相邻元素.
?
修改后效果如图:
(4) absolute 是绝对定位,这个属性绝对是position的精髓所在.绝对定位元素会脱离文档流,整个文档会当做它不存在一样去排版,并且它原先所占有的空间也不会存在.
?
这时之前最外层div的float对于div-1a不起作用了,然后它相对于最外层标签html定位了,并且它原先的位置被下面的元素占用了.
上面之所以div-1a是相对于html定位是在一定条件下得,并不是通用的.只有在绝对定位的任何祖先元素都没有设置position值为relative或absolute的情况下,它才会比照html进行定位.
如果话被这么说了,那么可以联想到relative+absolute这样的组合一定会产生别的结果.
如果一个元素被绝对定位,那么先在离自己最近的元素中看有没有相对定位的元素,如果有则以此为参照物.如果没有则追溯祖先元素中有没有相对定位的元素.
(5) relative + absolute = absolute以relative定位.
修改代码:
?
将div-1加上relative,然后去掉div-1a的top和left.看效果:
可以看到div-1a覆盖了一部分的div-1b,大约一半左右.它变成相对于div-1定位了,而不是html.
(6) position布局
通过relative+absolute就可以实现一些布局效果.
?
可以看到div-1a和div-1b的布局,相对于div-1并且忽略了div-1的padding属性.
在CSS布局上float和position是永远说不完的道不尽的话题,它们的应用五花八门,组合技巧千奇百怪.通常如果你不是一个很熟练的Csser,那么你对与position肯定还是一知半解,比如说我自己...
position的属性值大家应该是很熟悉的,static,absolute,relative,fixed.
这里做个demo,一步步详解position.
(1) 准备一些div,只加上背景色去区分它们,如下图.
代码:
?
(3) relative 是相对定位,这个相对指的是元素的正常位置,就是相对于你不加position:relative;的情况进行了如何的偏移.加完这个属性可以通过top,left,bottom,right进行位移设置.如果没有设置这些位移仅仅设置position:relative;那么元素位置不会有任何变化.
需要注意的是设置为relative的元素,它默认占有的空间还会继续被该元素占有,同时它不会影响其他相邻元素.
?
(4) absolute 是绝对定位,这个属性绝对是position的精髓所在.绝对定位元素会脱离文档流,整个文档会当做它不存在一样去排版,并且它原先所占有的空间也不会存在.
?
上面之所以div-1a是相对于html定位是在一定条件下得,并不是通用的.只有在绝对定位的任何祖先元素都没有设置position值为relative或absolute的情况下,它才会比照html进行定位.
如果话被这么说了,那么可以联想到relative+absolute这样的组合一定会产生别的结果.
如果一个元素被绝对定位,那么先在离自己最近的元素中看有没有相对定位的元素,如果有则以此为参照物.如果没有则追溯祖先元素中有没有相对定位的元素.
(5) relative + absolute = absolute以relative定位.
修改代码:
?
可以看到div-1a覆盖了一部分的div-1b,大约一半左右.它变成相对于div-1定位了,而不是html.
(6) position布局
通过relative+absolute就可以实现一些布局效果.
?
可以看到div-1a和div-1b的布局,相对于div-1并且忽略了div-1的padding属性.
相关文章推荐
- ActionBar样式解析
- CSS实现鼠标滑过按钮更改按钮样式
- CSS实现按钮或文本框圆角效果
- css3 使用SVG做0.5px 的边框细线
- 理解CSS3 transform中的Matrix(矩阵)
- 根据模板提示,加入元素,修改CSS
- transform animation transition css3动画
- CSS-如何引入-格式
- css常见问题
- input输入框清除样式
- HTML/CSS中有序<ol&g bfb7 t;、无序<ul>、定义列表用法详解
- 【转】html使用css让文字超出部分用省略号三个点显示的方法案例
- css控制文字显示长度
- css3d动画学习心得2:一个小游戏实践
- IE8中伪元素动态作用样式不重绘bug记录
- css设置div圆角
- css3属性集合
- css-实现元素垂直居中对齐
- css-实现元素垂直居中对齐
- CSS学习笔记