CSS 定位属性

固定定位：元素的位置相对于浏览器窗口是固定位置。（脱离标准文档流）

注意：固定定位的元素不是说该元素的某一个点相对于参考元素的元素定位，而是定位元素的四条边相对于参考元素的定位。

如下面的例子中 left、right、top、bottom四个属性的值都是有效果的。

    h2
        {
            position:fixed;
            background-color: red;
            left:100px;
            right: 10px;
            top:150px;
            bottom: 10px;
        }

相对定位：相对定位元素的定位是相对其正常位置。（标准文档流）

相对定位的元素只是位置的改变，大小不会变化。

如下面的例子中，bottom没有效果。

 h2
        {
            position:relative;
            background-color: red;
            top:150px;
            bottom: 10px;
        }

绝对定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。（脱离标准文档流）

注意：绝对定位的元素不是说该元素的某一个点相对于参考元素定位，而是定位元素的四条边相对于参考元素的定位。（相对定位，位置改变不会影响元素大小的变化）

扫描二维码关注公众号，回复： 78966 查看本文章

如下面的例子中 left、right、top、bottom四个属性的值都是有效果的。

 h2
        {
            position:absolute;
            background-color: red;
            left:100px;
            right: 10px;
            top:150px;
            bottom: 10px;
        }

猜你喜欢