CSS中position属性总结
2014-07-15 17:02
337 查看
总结一下CSS中的position属性吧!!
position: relative | absolute | static | fixed
static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute(绝对定位) 对象可层叠、脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
fixed(固定定位)这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
2、相对定位与绝对定位的有关脱离文档流
relative虽然脱离了文本流,但是原先的位置也会被保留。只是相对于原先的位置,通过top、left、bottom、right设置元素的偏移。相当于人走了,位置还保留着。
CSS代码
结果为
absolute(绝对定位)不光脱离了文本流,而且在文本流中也不会给这个绝对定位元素留下专属空位。移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL(TOP、RIGHT、BOTTOM、LEFT)来设置元素,使之处在任何一个位置。在父层position属性为默认值时,TRBL的坐标原点以body的坐标原点为起始。相当于人走了,位置也就撤销了。绝对定位不影响文本流,其它元素直接可以与绝对定位的元素重叠。如果没有指定绝对定位的TEBL,那么该元素放于正常的文本流,但是在此处可以发生重叠。
添加css代码
这是div7没有脱离标准流的情况,结果如下
CSS代码改变如下
这是div7脱离标准流的情况,结果如下
定义:
在CSS中关于position定位的内容是:position: relative | absolute | static | fixed
static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute(绝对定位) 对象可层叠、脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
fixed(固定定位)这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
解释:
1、想要使用z-index属性进行层次分级是,就必须要设置position属性并且不能为static。2、相对定位与绝对定位的有关脱离文档流
relative虽然脱离了文本流,但是原先的位置也会被保留。只是相对于原先的位置,通过top、left、bottom、right设置元素的偏移。相当于人走了,位置还保留着。
CSS代码
*{ margin:0px; padding:0px;} div{ background:#0F0; width:100px; height:100px; border:1px solid #000;} #div3{ position: relative; left:200px; bottom:100px;} body体内 <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div id="div4">div4</div> <div id="div5">div5</div> <div id="div7"> <p>我是div7,是div6的父亲</p> <div id="div6">div6</div> </div>
结果为
absolute(绝对定位)不光脱离了文本流,而且在文本流中也不会给这个绝对定位元素留下专属空位。移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL(TOP、RIGHT、BOTTOM、LEFT)来设置元素,使之处在任何一个位置。在父层position属性为默认值时,TRBL的坐标原点以body的坐标原点为起始。相当于人走了,位置也就撤销了。绝对定位不影响文本流,其它元素直接可以与绝对定位的元素重叠。如果没有指定绝对定位的TEBL,那么该元素放于正常的文本流,但是在此处可以发生重叠。
添加css代码
#div5{ position:fixed;top:300px; left:300px; background-color:#C09; float:right; } #div6{ position: absolute; left:300px; top:50px;}
这是div7没有脱离标准流的情况,结果如下
CSS代码改变如下
#div5{ position:fixed;top:300px; left:300px; background-color:#C09; float:right; } #div6{ position: absolute; left:300px; top:50px;} #div7{ position:absolute;} 或者#div7{ position:relative;}
这是div7脱离标准流的情况,结果如下
相关文章推荐
- (转)总结一下CSS中的定位 Position 属性
- CSS中position属性总结笔记
- 总结CSS的position定位属性在使用的一些重点
- 总结一下CSS中的定位 Position 属性
- css总结:HTML中用position进行相对定位时与float属性连用容易产生的误区
- 总结一下CSS中的定位 Position 属性(转)
- [转]总结一下CSS中的定位 Position 属性
- 总结一下CSS中的定位 Position 属性
- css 之 position属性
- CSS教程:position属性
- CSS中的Position属性
- 区分CSS中position定位属性absolute与relative
- css 中Position属性及值的作用和用法
- css中的position:relative和absolute 属性
- css中的position属性
- CSS中的Position属性
- 实现 IE6 下支持 position-fixed 的 CSS 属性并解决“振动”的问题
- 深入理解css中的position定位和z-index属性,CSS的定位属性共有9个
- CSS position属性
- CSS布局最常用属性float(浮动)和position(定位)