css定位:相对定位、绝对定位、固定定位的区别与特性
原文地址:http://www.qingzhouquanzi.com/106.html
css定位常用的有以下三种：
使用了定位的共同特性:
这三种定位可以设置四个值,但是通常只用到2个值就可以完成定位
如果只写了定位 没有设置偏移量,则元素位置都不会改变,默认值为原来的位置.
使用了定位,.元素会提升一个层级(如果与别的元素发生重叠,会在别的元素上面)
如果多个元素同时开启了定位.层级都一样的情况下.如果发生重叠.则后面的元素会盖住前面的元素
如果想调整层级 可以使用z-index:来调整层级,
需要注意的是
1.没有开启定位的元素不可以使用z-index属性
2.父元素的层级再高,也不会盖住子元素
相对定位(相对于元素原来的位置偏移)
position:relative;
left:
top:
绝对定位(相对于祖元素 偏移)
position:absolute;
left:
top:
固定定位(相对于浏览器窗口偏移)
position:fixed;
left:
top:
相对定位的特点:
1.相对定位的元素不会脱离文档流(所以元素在文档流中的特征他都包含)
2.相对定位元素会提升一个层级(如果与其他元素发生重叠 它会在上面)
3.相对定位不会改变元素的性质(块元素仍然是块元素,行内元素仍然是行内元素)
4.相对定位.但是不设置任何偏移值,.元素则不会有任何变化
绝对定位的特点:
1.绝对定位如果不设定任何偏移值,元素位置不会有任何改变(后面的就不一定了)
2.绝对定位会使得元素脱离文档流
3.绝对定位是相对于离他最近的开启了定位的元素进行定位的,如果都没有,则相对于body进行定位(所以通常给父元素也加一个定位)
4.绝对定位也会使得元素提升一个层级
5.绝对定位会改变元素的性质.行内元素会变成块状元素(因为会脱离文档流,也就是脱离文档流的特性)
固定定位:
固定定位也是绝对定位的一种.拥有绝对定位的大部分特点
但是他是相对于浏览器窗口的位置进行定位.比如漂浮的客服,回到顶部.这类的按钮都是使用的固定定位