对CSS中的Position属性的一些深入探讨
转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html
Position属性
Position的属性值共有四个static、relative、absolute、fixed。
Static
所有元素在默认的情况下position属性均为static,而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right。在position为static的情况下无效。其用法为:在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的普通流中。
Relative
我们此前说过每个元素在页面的普通流中会有“占用”一个位置,这个位置可以理解为默认位置,而相对定位就是将元素偏离元素的默认位置,但普通流中依然保持着原有的默认位置,并没有脱离普通流,只是视觉上发生的偏移。relative的偏移是基于对象的margin的左上侧,它可以在display:inline(行内元素)的时候起作用。
我们先用块状元素来做个示例:
<style type="text/css"> div{ width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; } </style> <div style="background: blue">A</div> <div style="background: red; position: relative; top: 20px; left: 20px;">B</div> <div style="background: green">C</div>
右图中的黑色虚线部分为元素B的默认普通流位置,而黄色线则代表元素B的相对偏移量。我们可以很明显的看出在元素C依然还是保留在原位,并没有因为元素B发生了偏移而随之变化。
我们再来看看行内元素(在这里用大家最常用的span来做示例)
<style type="text/css"> strong { background: #808080; } em { background: #ffd800; } span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; } </style> <strong>strong</strong><em>em</em><span>span</span>
在这里对span进行width属性的赋值(为100px),但是我们可以看到span在运用了relative这个position属性值后,依然对width属性无效,没有变成100px。换而言之,position: relative并没有改变行内元素的Display属性,这个概念非常重要(注意与接下来的absolute的区别)--->relative只是视觉上发生位置变化不会改变display。
Absolute
俗称的绝对定位,绝对定位是相对而言的,怎么理解呢?应用了position: absolute的元素会循着节点树中的父(祖)元素来确定“根”,然后相对这个“根”元素来偏移。如果在其节点树中所有父(祖)元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。当元素的父级设置了position属性,且position的属性值为absolute或者relative时,这个时候,元素将按照这个父级来进行定位。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性!
我们先用一个默认嵌套的DIV来做示例
<body style="background: yellow;"> <div style="background: #fff"> A <div style="background: #81b6ff"> A - 1 <div style="background: #b6ff00;"> A - 2 </div> </div> </div> </body>
现在我们对A-2这个div设置绝对定位(Top: 0, Left: 0),而没有对它的父元素(A、A-1)设置任何的position值
<body style="background: yellow;"> <div style="background: #fff"> A <div style="background: #81b6ff"> A - 1 <div style="background: #b6ff00; position: absolute; top: 0; left: 0;"> A - 2 </div> </div> </div> </body>
可以看到(A-2)最终是根据body来产生了位移,让我们对比分别设置一下父元素position。
从上面的图,我们可以总结以下几个结论。
1)块状元素在position(relative/static)的情况下width为100%,但是设置了position: absolute之后,会将width变成auto(会受到父元素的宽度影响)。
2)元素设置了position: absolute之后,如果没有设置top、bottom、left、right属性的话,浏览器会默认设置成auto,而auto的值则是该元素的“默认位置”。即设置position: absolute前后的offsetTop和offsetLeft属性值不变。
特殊情况:
- Firefox的话会直接将top、left设置成offsetTop和offsetLeft的值而非auto。
- IE7下会附加到父元素的末尾。
一些Position小知识
1)应用了position: relative/absolute的元素,margin属性仍然有效,以position:relative来举例。如果设置了left、top、bottom、right的属性,建议大家不要设置margin数据,因为很难精确元素的定位,尽量减少干扰因素。
2)position: absolute忽略根元素的padding。
<div id="a" style="background: #fff; width: 200px;"> A <div id="b" style="background: #81b6ff; width: 150px; position: relative; padding-top: 100px;"> A - 1 <div id="c" style="background: #b6ff00; position: absolute; left: 0; top: 0"> A - 2 </div> </div> </div>
3)在IE6/7中设置position属性后会导致z-index属性失效
<!-- 解决方案,父元素设置一个更大的z-index值即可 --> <div style="z-index: 2;"> a <div style="position: relative; z-index: 1;"> b </div> </div>
4)行内元素在应用了position:absolute之后会改变display。
<span style="position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; background: #fff;"> 我的display属性由inline变成了block </span>
因此,要注意到relative是并没有改变行内元素的呈现模式,而absolute是会改变行内元素的呈现模式,如果设置了absolute并不需要显式的的将元素display改成block。
5)应用了position: absolute / relative之后,会覆盖其他非定位元素(即position为static的元素),如果你不想覆盖到其他元素,也可以将z-index设置成-1。
Fixed
在很长的时间里,这个属性值因为兼容性问题,并没有得到非常广泛的应用(IE6未实现该属性值)。fixed和absolute有很多共同点:
- 会改变行内元素的呈现模式,使display之变更为block。
- 会让元素脱离普通流,不占据空间。
- 默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于:absolute的”根元素“是可以被设置的,而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页,其元素与浏览器窗口之间的距离是恒定不变的。
对CSS中的Position属性的一些深入探讨的更多相关文章
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- css中关于position属性的探究(原创)
关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
- 细说css中的position属性
有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...
- css中的position属性值的探究
css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...
- 浅谈css中的position属性
我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
- CSS中的position属性笔记
一般有5个属性,分别是:static,absolute,relative,fixed,inherit static 自然定位:这个是默认值,没有定位,再设置top,rignt,bottom,left会 ...
- 关于css中的position定位
希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...
随机推荐
- POJ-2378 Tree Cutting
题目大意:一棵n个节点的树,找出所有的点满足:删除它之后,产生的最大(这里节点数最多即为最大)新树中节点数不超n的一半. 题目分析:两次深搜,过程类似求重心. 代码如下: # include<i ...
- GPU(CUDA)学习日记(十一)------ 深入理解CUDA线程层次以及关于设置线程数的思考
GPU线程以网格(grid)的方式组织,而每个网格中又包含若干个线程块,在G80/GT200系列中,每一个线程块最多可包含512个线程,Fermi架构中每个线程块支持高达1536个线程.同一线程块中的 ...
- firework便捷截LOGO
1.魔术棒选空白部分 2.按delete键 3.符合画布
- syslog-ng 安装
下载 Syslog-NG的rpm包, 地址 http://www.kevindeng.org/wp-content/uploads/2010/10/Syslog-NG.zip unzip解压 [ro ...
- OpenJudge计算概论-求满足条件的3位数
/*======================================================================== 求满足条件的3位数 总时间限制: 1000ms 内 ...
- Linux -RAID
转自:http://www.cnblogs.com/xiaoluo501395377/archive/2013/05/25/3099464.html 硬盘类型 速度 SATA <150M/s S ...
- ORACLE 常用数值函数
1 ABS(n)返回数值弄参数的绝对值.它接受一个数值型值作为输入参数,或者任何可以隐式地转换为数值型值的值.并且返回数值型值的绝对值. Select abs(-1) from dual ABS(-1 ...
- mysql.server 文件修改起动多实例
如果你用mysql.server来启动的话,就要注意一下点,要修改一下里面的内容,修改如下:大约218行左右 查看复制打印? then print_defaults="$bindir/mys ...
- JSP MVC
Java的MVC玩起来比.Net的有意思,因为每一步你都知道它是如何运作的,都由自己去实现.而在.Net的MVC中,你却不知道一个Controller是如何对应到View中的,因为MS给了你IDE上的 ...
- Neutron分析(6)—— neutron-openvswitch-agent
neutron-openvswitch-agent代码分析 neutron.plugins.openvswitch.agent.ovs_neutron_agent:main # init ovs fi ...