css position static | absolute | fixed | relative

<div id="bigbox1">
    <div id="box1" class="box">box1</div>
    <div id="box2" class="box">box2</div>
    <div id="box3" class="box">box3</div>
    <div id="box4" class="box">box4</div>
</div>
<div id="bigbox2"></div>

1. 所有div为block, 且默认position：static

2. position: fixed

#box2 {

　　position: fixed;

　　right: 50px;

　　bottom: 0px;

}

box2脱离文档流，相对浏览器窗口进行定位，拖动窗口，也保持右下侧的位置不变。z-index属性有效。

3. position: absolute;

#box3 {

　　position: absolute;

　　left: 30px;

　　top: 100px;

}

box3 脱离文档流，相对于父级元素定位，若上级元素的position为fixed或absolute，则以上级元素进行定位，若不是，这看上上级元素是否为fixed或absolute， 若所有上级元素都不是，则以窗口进行相对定位。z-index属性有效。

4. position： relative

#box3 {

    position: relative;
    right: 30px;
    bottom: 10px;

}

box3 没有脱离文档流，相对于自身原本的位置进行相对定位，移动位置后，原来的位置保持在原处。

转载于:https://www.cnblogs.com/meredith/p/3364945.html