盒子定位中的固定定位

13 iug^

已于 2024-10-17 16:31:44 修改

阅读量583

点赞数 20

文章标签：前端 css html

于 2024-10-14 17:50:27 首次发布

本文链接：https://blog.youkuaiyun.com/2401_87197766/article/details/142916070

版权

1、概念：相对于浏览器窗口进行定位（会脱离文档流）。固定定位的元素位置相对于浏览器窗口是固定的，即使页面滚动，元素也不会随之移动，除非改变浏览器窗口的位置或大小‌。

2、CSS代码添加：

position：fixed

3、水平方向的偏移量由left和right属性指定；垂直方向的偏移量由top和bottom属性指定。

注:①两个方向各选一个参数即可定位；

②定位的数值可以为负数；

③设置了固定定位的盒子，都会有专属的浮层，有几个固定定位的盒子，就有几个浮层。

4、固定定位示例

<head>
    <title>固定定位</title>

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: gray;
        margin-bottom: 5px;
    }
    #div2{
    
        background-color: red;
        margin-bottom: 5px;
        /* 拖动滚动条时此盒子不动 */
        position: fixed;
        left: 216px;
        top: 216px;
    }
    #div5{
        background-color: green;
        margin-bottom: 5px;
        position: fixed;
        /* left: 250px;
        top: 250px; */
        right: 10px;
        bottom: 10px;
       
    }
</style>

</head>
<body>
    <div>盒子1</div>
    <div id="div2">盒子2(固定定位)</div>
    <div >盒子3</div>
    <div>盒子4</div>
    <div id="div5">盒子5(固定定位)</div>
    <div>盒子6</div>
    <div>盒子7</div>
    <div>盒子8</div>
</body>

运行结果如下：

2024-10-14 14-06-41-381_Trim

根据代码运行可以看出盒子2和盒子5在拖动滚动条时盒子不动，其他都会随着拖动滚动条时滚动。