position定位

Posted 2020-08-05

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参照父元素