重学前端:相对定位VS绝对定位VS固定定位

By 刘志军, 2020-04-15, 分类: 前端

css

position 是CSS中非常重要的属性,顾名思义,他是用来指定一个元素在页面上的位置,搞懂了position的属性值对布局的理解会更加透彻。

position一共有5个值,分别是:

static
relative
fixed
absolute
sticky

static 是 position 的默认值,如果元素没有指定position,那么他的值就是默认的static定位。他会按照正常的文档流从上到下,从左到右放置每个元素。

relative、absolute、fiexed 都是相对于某个点进行定位,只是他们的参照点不一样。此外这三种定位都不影响其他元素的位置。

相对定位 relative

相对定位是相对于元素在文档流中的初始位置根据left、top、right、bottom 四个方向进行移动。移动后,原来的空间还被占用,同时可能会覆盖其他的元素。

微信截图_20200324144059.png

假设有两个div,初始位置如下:

微信截图_20200324111451.png

现在给div1设置如下相对位置:

.div1 {
    position: relative;
    top: 20px;
    left: 20px;
}

相对初始位置距离顶部下移20px,距离左侧向右移动 20px。最终效果图如下

微信截图_20200324111625.png

这时,div2的位置没变,而div1往右下方移动后遮盖了div2.

绝对定位 absolute

决对定位是相对于已定位的最近的祖先元素位置进行移动。它会脱离文档流,不占据空间。因此其它元素会移动到该元素原来所在的位置去。因为该元素已经脱离了文档流。同时它还可能会覆盖其它元素,可以通过z-index 属性决定谁显示在最前面,值越大越显示在前面。

微信截图_20200324155347.png

注意上面加粗的"已定位"三个字,相对的是“已定位”的祖先元素,意味着祖先元素必须不能是static属性的定位,否则继续往外层找已定位的祖先,直到根元素

看下面这个例子:

div1 和 div2 是子元素,div0是父元素

微信截图_20200324151739.png

<div class="d0">
        div0
    <div class='d1'>
        div1
    </div>
    <div class="d2">div2</div>
</div>

样式:

    .d0{
        background-color: cornflowerblue;
        width:200px;
    }

    .d1{
    background-color: cadetblue;
    width: 100px;

    }

    .d2 {
    background-color: coral;
    width: 100px;

    }

现在我们把div1使用绝对定位,分别离左侧往右20px,离顶部往下移动2px;

 .d1{
    background-color: cadetblue;
    width: 100px;
    position: absolute;
    left:20px;
    top: 2px;

}

微信截图_20200324153733.png

你会发现div1跑到了父元素div0的上面去了,这不和上面说的不一样了。不是说它是相对于最近的祖先元素进行移动吗?按理说我们要的效果是这样的

微信截图_20200324154208.png

那是因为父元素div0的定位属性是默认的static,解决办法也简单,我们给div0指定 position: relative 就行。 这时,div1 就是基于父元素div0右下方移动了。

固定定位 fixed

固定定位是绝对定位中的一种特殊情况,它是相对整个视窗viewport(浏览器窗口)进行移动。它表现出来的特点就是,不管页面的元素有多少,它始固定在那个位置。很多网站的导航栏始终置顶在浏览器窗口上面,用的就是基于固定定位实现的。

我们将上面例子的div1的position 改为固定定位 fiexed 后的效果就是这样

position: fixed;

position-fixed.gif

无论怎么改变窗口大小或者拉动滚动条,它总会显示在固定的位置,而其它元素是跟着窗口一起动的。

sticky

sticky 是‘粘贴“的意思,是relative 于 fiexed 的结合体,当元素还在窗口出现时,表现为relative, 当元素欲要离开窗口时,表现为 fiexed,被固定在某个位置。

先看下效果

position-fixed

相信你在一些网页中有体验过这种操作。

<html>
<head>
    <style type="text/css">

        .container {
            position: relative;
        }

        h1 {
            background: green;
            margin: 10px;
            position: sticky;
            position: -webkit-sticky;
            top:0px;
        }

        p{
            line-height: 70px;
        }


    </style>
</head>

    <body>
        <div class="container">
            <div>xxxxxxxxxxxxxx</div>
            <div>xxxxxxxxxxxxxx</div>
            <div>xxxxxxxxxxxxxx</div>

            <h1>第二段</h1>
            <div>
                <p>这里是文本内容</p>
                <p>这里是文本内容</p>
                <p>这里是文本内容</p>
                <p>这里是文本内容</p>
                <p>这里是文本内容</p>
                <p>这里是文本内容</p>
                <p>这里是文本内容</p>
            </div>
        </div>
    </body>
</html>

总结一下

relative 是相对于元素原来的位置移动, absolute 是相对于定位的父元素移动, fiexed 是相对视窗移动。 相对的“对象”一个比一个大。

参考链接:

https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/


有问题可以扫描二维码和我交流

关注公众号「Python之禅」,回复「1024」免费获取Python资源

python之禅

猜你喜欢

2019-05-08
重学前端:块级元素与行内元素