首页 > 代码库 > position定位

position定位

1.CSS定位有4种

static 默认值,没有定位 此种元素存在于文档流中

absolute 绝对定位 元素脱离文档流,浮动在普通元素上面,多个叠加绝对定位的元素可通过z-index的大小改变层叠顺序

fixed  绝对定位 元素脱离文档流,浮动在普通元素上面 ,多个叠加绝对定位的元素可通过z-index的大小改变层叠顺序

relative 相对定位 相对于元素创建时所在的位置定位,此时元素仍在文档流中,不管该元素怎么定位,后面的元素都仍为该元素位置没有改变,多个叠加相对定位的元素可通过z-index的大小改变层叠顺序

 

2.z-index控制元素的堆叠顺序

 2.1在html中,后创建的元素一定在先创建的元素上面,所以z-index相同的情况下,后创建的元素在上面

   2.2不能通过z-index控制父元素堆叠在子元素上面,只能控制脱离文档流后的浮动元素族;比如

<div id=‘child1‘ style="width:100px;height:400px;position:fixed;top:40px;left:20px;z-index:18"></div>    <div id=‘child2‘ style="width:50%;height:400px;position:static;top:40px;left:20px;z-index:15">            <div id=‘sub1‘ style="width:150px;height:200px;position:absolute;left:30px;top:30px;z-index:1"></div>            <div id=‘sub2‘ style="width:50%;height:200px;position:fixed;left:60px;top:30px;z-index:19"></div>  </div>

由于child2是static定位,那么sub2在fixed定位时,浮动元素族有:child1,sub1,sub2;三者通过z-index改变互相堆叠顺序

 

3.width,height,top,left,right,bottom在使用百分比时,它们是相对于谁的百分比?

根据定位的方式来确定:

     absolute:往上寻找不是static定位的第一个祖先元素,当前元素的width,height,top,left,right,bottom都是相对于该祖先元素设置的

     fixed:参照对象是浏览器

     relative:参照改元素原本在文档流中的位置定位,同样具有top,left,right,bottom定位属性,width和height参照父元素的宽高,不关心父元素的定位

   static:width和height参照父元素

 

position定位