css3中position定位详解
2013-11-21 20:53
447 查看
最近热衷于前端的开发,因为突然发现虽然对于网站、应用来说,功能处于绝对重要的地位,但是用户体验对于用户来讲同样是那么的重要,可以说是第一印象。最近在开发当中发现以前对于css中的position的理解有些偏颇,在这里分享一下这几天的学习。
首先总体介绍一下接下来要分析的position属性的两个值:absolute和relative(绝对定位和相对定位),
绝对定位:1、当某元素使用绝对定位并且未设置top,left的值时,实际上并未真正脱离文档流,2、使用绝对定位并且设置了top,left时,这才脱离了文档流,并以最外层body元素作为父容器,
相对定位:1、当某元素使用相对定位时,无论设不设置top,left的值,都不会脱离文档流
接下来以实验论证我的观点,贴出一段实验小代码
相信这个就不用多做解释了,外层一个div,里面有三个div,第一个是普通div,接下来一个id是absolute,另一个是relative,摆明了就是分别测试absolute和relative的。
我们在init函数中分别将absolute和relative的div的内容显示两个div分别的top和left
最外层div距离浏览器上边框10px,里面第一个(红色)div高度为30,在absolute和relative中可以看出top的值是一样的,那么是不是就说明无论是absolute还是relative在这个时候都未脱离文档流,因为他们被上面第一个div挤下来了,接下来分别将absolute和relative两个div设置 top=100px,那么结果如下:
由上图可以看出,设置了top之后,absolute这个元素的top值是100px,而relative的top值却是144px,说明absolute这个元素是脱离了文档流以body为父元素的,而relative中的144=100+44,说明relative是以外层div为父容器,并且未脱离文档流,在上一个(红色)div的基础上向下平移了100px,由此证明了以上论断。
position属性值还有fixed,和默认值static,以及top,left的用法还有很多注意事项,以后慢慢再说。
首先总体介绍一下接下来要分析的position属性的两个值:absolute和relative(绝对定位和相对定位),
绝对定位:1、当某元素使用绝对定位并且未设置top,left的值时,实际上并未真正脱离文档流,2、使用绝对定位并且设置了top,left时,这才脱离了文档流,并以最外层body元素作为父容器,
相对定位:1、当某元素使用相对定位时,无论设不设置top,left的值,都不会脱离文档流
接下来以实验论证我的观点,贴出一段实验小代码
<!DOCTYPE html> <html> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body onload="init();"> <div style="width: 400px;height:400px;border: cadetblue 2px solid;"> <div style="width: 300px;height: 30px;border: 2px solid red;"> </div> <div style="position: absolute;width: 80px;height: 30px;border: 2px solid orange;" id="absolute"> </div> <div style="position: relative;width: 160px;height: 60px;border: 2px solid blueviolet;left: 150px;" id="relative"> </div> </div> </body> <script> function init(parameters) { var absoluteStr = "absolute :top=" + absolute.offsetTop + ",left=" + absolute.offsetLeft; absolute.innerHTML = absoluteStr; var relativeStr = "relative :top=" + relative.offsetTop + ",left=" + relative.offsetLeft; relative.innerHTML = relativeStr; } </script> </html>
相信这个就不用多做解释了,外层一个div,里面有三个div,第一个是普通div,接下来一个id是absolute,另一个是relative,摆明了就是分别测试absolute和relative的。
我们在init函数中分别将absolute和relative的div的内容显示两个div分别的top和left
最外层div距离浏览器上边框10px,里面第一个(红色)div高度为30,在absolute和relative中可以看出top的值是一样的,那么是不是就说明无论是absolute还是relative在这个时候都未脱离文档流,因为他们被上面第一个div挤下来了,接下来分别将absolute和relative两个div设置 top=100px,那么结果如下:
由上图可以看出,设置了top之后,absolute这个元素的top值是100px,而relative的top值却是144px,说明absolute这个元素是脱离了文档流以body为父元素的,而relative中的144=100+44,说明relative是以外层div为父容器,并且未脱离文档流,在上一个(红色)div的基础上向下平移了100px,由此证明了以上论断。
position属性值还有fixed,和默认值static,以及top,left的用法还有很多注意事项,以后慢慢再说。
相关文章推荐
- css3——position定位详解
- CSS中position属性详解以及定位的说明——实验2
- CSS3 定位| Position研究
- 【JavaScript】div+css定位position详解
- CSS中position的4种定位详解
- CSS中position属性详解以及定位的说明——实验3
- 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位
- 栋栋晓07:详解css布局中的定位position属性
- CSS布局之定位详解(position)
- css3 position: absolute 垂直居中定位
- CSS魔法堂:Position定位详解
- CSS中position属性详解以及定位的说明——实验4
- position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,
- css中position相对定位和绝对定位(relative,absolute)详解
- CSS中Backgroud-position(背景图片)定位问题详解
- Css_Backgroud-position(背景图片)定位问题详解
- position的相对定位和绝对定位详解
- CSS3中position属性( absolute | relative | static | fixed )详解
- css position定位详解
- CSS魔法堂:Position定位详解