Position 定位解读

今天对css中的position的几个参数值做一个总结。

position 中的几个参数值
absolute 
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 
fixed 
生成绝对定位的元素，相对于浏览器窗口进行定位。 
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 
relative 
生成相对定位的元素，相对于其正常位置进行定位。 
因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。 
static 
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 
inherit 
规定应该从父元素继承 position 属性的值。

文档流是什么？
将浏览器窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。  
每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端。 若当前行容不下， 则另起新行再浮动。 
内联元素也不会独占一行。 几乎所有元素(包括块级，内联和列表元素）均可生成子行， 用于摆放子元素。  
有三种情况将使得元素脱离文档流而存在，分别是 浮动，绝对定位， 固定定位。 但是在IE6中浮动元素也存在于文档流中。

relative 相对定位
生成相对定位的元素，相对于其正常位置进行定位。

使用position:relative定位，其元素依旧在文档流中。

  position: relative; left:20px; top:20px;

fixed 相对浏览器固定定位

生成相浏览器元素，相对于浏览器位置进行定位。

使用position:fixed定位，其元脱离文档流。

当页面发生了滚动，我们可以看到，页面的内容已经根据滚动条的位置发生了位移。但是我们的test3 依旧是在相对于浏览器的位置

 position: fixed;left:200px;top:200px;

absolute 绝对定位

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

使用position:absolute定位，其元脱离文档流。

HTML代码

<div class="text1">text1
　　<div class="text2">text2
　　　　<div class="text3">text3</div>
　　</div>
</div>

第一种情况

如上图所示，父元素没有定位默认为static ，test3的div相对于文档偏移

    .text1{
        width:100px;
        height: 100px;
        background: pink;
    }
    .text2{
        width:50px;
        height: 50px;
        background: grey;
    }
    .text3{
        width:100px;
        height: 100px;
        position: absolute;
        left:100px;
        top:100px;
        background:bisque;
    }

第二种情况

如上图所示，text2相对于正常文档流偏移，text3 的div 相对于 text2的div 向左偏移10px,向下偏移10px；即相对于 static 定位以外的第一个父元素进行定位。

 .text1{
        width:300px;
        height: 300px;
        background: pink;
    }
    .text2{
        width:250px;
        height: 250px;
        position: relative;
        left:10px;
        top:10px;
        background: grey;
    }
    .text3{
        width:30px;
        height: 30px;
        position: absolute;
        left:10px;
        top:10px;
        background:bisque;
    }

第三种情况

如图所示，text2的div相对浏览器偏移，text3的div相对text2的div进行偏移。即相对于 static 定位以外的第一个父元素进行定位。

    .text1{
        width:300px;
        height: 300px;
        background: pink;
    }
    .text2{
        width:250px;
        height: 250px;
        position: fixed;
        left:10px;
        top:10px;
        background: grey;
    }
    .text3{
        width:30px;
        height: 30px;
        position: absolute;
        left:10px;
        top:10px;
        background:bisque;
    }

第四种情况

如图所示，text2 的div 相对文档流偏移，text3的div 相对text2 的div 偏移。即相对于 static 定位以外的第一个父元素进行定位。

 .text2{
        position: absolute;
        left:100px;
        top:100px;
    }
 .text3{
        position: absolute;
        left:10px;
        top:10px;     
    }

absolute 绝对定位

猜你喜欢