CSS固定定位

将元素的position属性设置为fixed,则开启了元素的固定定位用法: position: fixed;固定定位的特点:固定定位也是一种绝对定位,所以固定定位的大部分特点都和绝对定位一样与相对定位一样.开启了固定定位以后,如果不设置偏移量,元素的位置不会发生任何改变与绝对定位的不同点: 固定定位永远是参照于浏览器的窗口进行定位固定定位的元素不会随着网页的滚动条滚动下面我们来看一个栗子,实际体验

不会写代码的菜

5834人浏览 · 2022-06-20 16:51:18

不会写代码的菜 · 2022-06-20 16:51:18 发布

固定定位

将元素的position属性设置为fixed,则开启了元素的固定定位
用法: position: fixed;
固定定位的特点:
- 固定定位也是一种绝对定位,所以固定定位的大部分特点都和绝对定位一样
- 与相对定位一样.开启了固定定位以后,如果不设置偏移量,元素的位置不会发生任何改变
- 与绝对定位的不同点: 固定定位永远是参照于浏览器的窗口进行定位
- 固定定位的元素不会随着网页的滚动条滚动

下面我们来看一个栗子,实际体验一下使用固定定位:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box1{
                width: 200px;
                height: 200px;
                background-color: #27A9E3;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: orange;
                position: relative;
                top: 50px;
            }
            .box3{
                width: 200px;
                height: 200px;
                background-color: #7FFF00;
                position: absolute;
                top: 100px;
                left: 100px;
            }
            .box4{
                width: 200px;
                height: 200px;
                background-color: darkgoldenrod;
                position: fixed;
                top: 20px;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2">
            <div class="box4"></div>
        </div>
        <div class="box3"></div>
    </body>
</html>

在上述代码中我们设置了4个块元素box1,2,3,4.且我们设置了box2为相对定位,box3为绝对定位,box4为固定定位,其背景色为灰色
- 我们可以看到,当我们设置了position: fixed;之后,如果不设置偏移量,那么就不会有任何改变.上述示例中设置了 top: 20px; left: 20px表示使box4相较于初始包含块向下偏移20个像素,向右移动20个像素
- 我们设置了box4的偏移量之后,元素完全脱离了文档流,不收原包含块的限制.这里我们设置偏移量之后是相对于初始包含块document进行定位的
- 设置了固定定位的元素也会使之上升一个层级
运行效果图如下: