固定定位常用的2种形式(小技巧)

最新推荐文章于 2023-04-12 12:40:12 发布

yrfjygb

最新推荐文章于 2023-04-12 12:40:12 发布

阅读量439

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/yrfjygb/article/details/113664071

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了两种CSS固定定位方法：一种是将元素固定在浏览器的一侧，利用`position:fixed`和`right`属性；另一种是将元素固定在版心盒子中，通过`left:50%`和`margin-left`实现。这两种方法都涉及到页面布局和定位的精准控制，适用于需要创建悬浮元素的场景。

摘要由CSDN通过智能技术生成

1.固定到浏览器

效果

效果图

样式：

 .fixed-box{
            position: fixed;
            top: 300px;
            /* 1.浏览器宽度的一半 */
            right: 0px;
            /* 2.版心盒子宽度的一半 */
            width: 30px;
            background: skyblue;
        }

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .fixed-box{
            position: fixed;
            top: 300px;
            /* 1.浏览器宽度的一半 */
            right: 0px;
            /* 2.版心盒子宽度的一半 */
            width: 30px;
            background: skyblue;
        }
    </style>
</head>
<body>
    <div class="fixed-box">固定定位的盒子</div>
</body>
</html>

2.固定到版心

效果：

效果图

原理：

原理图

分析：

1.浏览器宽度的一半 left: 50%;
2.版心盒子宽度的一半 margin-left: 300px;
一半 + 一半 = 固定盒子的宽度

样式：

	.container{
            width: 600px;
            height: 1300px;
            margin: 0 auto;
            border: 1px solid #eee;
            background-color: orange;
        }
        .fixed-box{
            position: fixed;
            top: 300px;
            /* 1.浏览器宽度的一半 */
            left: 50%;
            /* 2.版心盒子宽度的一半 */
            margin-left: 300px;
            width: 30px;
            background: skyblue;
        }

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 600px;
            height: 1300px;
            margin: 0 auto;
            border: 1px solid #eee;
            background-color: orange;
        }
        .fixed-box{
            position: fixed;
            top: 300px;
            /* 1.浏览器宽度的一半 */
            left: 50%;
            /* 2.版心盒子宽度的一半 */
            margin-left: 300px;
            width: 30px;
            background: skyblue;
        }
    </style>
</head>
<body>
    <div class="container">版心盒子</div>
    <div class="fixed-box">固定定位的盒子</div>
</body>
</html>

yrfjygb

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
固定定位常用的2种形式(小技巧)

1.固定到浏览器效果样式： .fixed-box{ position: fixed; top: 300px; /* 1.浏览器宽度的一半 */ right: 0px; /* 2.版心盒子宽度的一半 */ width: 30px; background: skyblue; }代码：<!DOCTYPE html
复制链接

扫一扫

专栏目录