定位元素

css布局中的position属性，对元素盒子使用这个属性，可以把它的位置重新定位。

position 属性有4个值：static 、relative、absolute、fixed，默认值为 static。

<p class="first">我是第一行</p>
<p class="Second">我是第二行</p>
<p class="Third">我是第三行</p>
<p class="Fourth">我是第四行</p>

静态定位（static）

静态定位.png

静态定位下，每个元素在处在常规文本中，它们都是块级元素，独占一行，所以会在页面中自上而下地堆叠。

相对定位（relative）

把第三段的position样式改为relative。

  .Third {
            position: relative;
            top: 25px;
            left: 30px;
        }

因为相对定位相对的是它原来在文档流中的位置（默认位置），如果只设置 position 样式不会有任何变化，必须设置了 top 和 left 属性来改变它的位置。

效果如下：

相对定位.png

第三行从原来的位置，向下移动了25px，向右移动了30px。

需要注意，相对定位会占据空间。

绝对定位（absolute）

绝对定位与相对定位相比，绝对定位会把元素从文本中脱离出来，不会占据页面的空间。

现在，把第三段的position样式改为absolute。

  .Third {
            position: absolute;
            top: 25px;
            left: 30px;
        }

效果如下：

绝对定位.png

可以看到，第三段原来的位置被回收了。这说明绝对定位的元素脱离了文档，它现在是相对于默认元素 body 在定位。

但是，当元素存在上下级关系的时候，给父级元素一个相对定位（position：relatic），给子元素一个绝对定位（position：absolute）时，子元素的上下左右位置，就会相对于父元素的位置来调整。

比如：

<div>
        <p></p>
</div>

css样式：

div {
            width: 200px;
            height: 200px;
            background: #cfc;
        }

p{
            width: 50px;
            height: 50px;
            background: blue;
        }

效果如下：

原来的样子.png

当我给父元素 div 一个相对定位（relative），子元素 p 一个绝对定位（absolute）时

div {
            width: 200px;
            height: 200px;
            background: #cfc;
            position: relative;
        }

p{
            width: 50px;
            height: 50px;
            background: blue;
            position: absolute;
            top: 20px;
            left: 20px;
        }

效果如下：

之后的样子.png

可以看到，当父元素 div 改为相对定位之后，子元素中绝对定位元素的 top 和 left 属性的设定，会相对于父元素 div 来定位。

固定定位（fixed）

把第三行的定位属性改为固定定位时，

.Third {
            position: fixed;
            top: 25px;
            left: 30px;
        }

效果如图：

固定定位.png

效果看起来和绝对定位完全一致，但是固定定位的定位位置是浏览器的视图窗口，不会跟随浏览器页面的滚动而消失。