css定位:相对定位、绝对定位、固定定位的区别与特性

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.绝对定位会改变元素的性质.行内元素会变成块状元素(因为会脱离文档流,也就是脱离文档流的特性)

固定定位:

固定定位也是绝对定位的一种.拥有绝对定位的大部分特点

但是他是相对于浏览器窗口的位置进行定位.比如漂浮的客服,回到顶部.这类的按钮都是使用的固定定位