在前端中，几种常见的定位使用

古月~

已于 2022-10-12 16:20:40 修改

阅读量2.3k

点赞数 1

文章标签：前端 html css

于 2022-10-12 14:30:12 首次发布

本文链接：https://blog.csdn.net/qq_50915088/article/details/127277111

版权

在前端中，经常使用两种方式来移动盒子：

利用浮动，结合内外边距。
利用定位。

其实更加方便，更适应复杂化的是第二种方式：定位position。

在前端中，定位常见的几种形式如下：

相对定位
绝对定位
固定定位
粘性定位

相对定位

相对定位，顾名思义，相较于原来的位置，也就是说：相对定位会保留原来的位置，不脱离标准文档流；

我们来举一个例子，为了更加形象，让盒子原先的位置在浏览器右上角(右浮动)：

<style>
    .box1 {
    	/* 右浮动 */
     	float: right;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

图一

然后对盒子使用相对定位，跟据相应的方位，改变其位置，样式和效果如下：

<style>
    .box1 {
    	/* 相对定位 */
         position: relative; 
         /* 距离顶部100px*/
         top: 100px; 
         /* 距离右侧100px*/
         right: 100px;
        float: right;
        width: 200px;
        height: 200px;
        background-color: pink;     
    }
</style>

在这里插入图片描述
要注意的是，如果继续对盒更改的基准依旧是最原始的位置，即浏览器右上角位置；而不是在更改的基础上再次进行更改。

绝对定位

绝对定位和相对定位相反，绝对定位脱离标准文档流，不保留原本的位置。

首先，建一个父级盒子包裹着子级盒子，父级盒子距离顶部和左侧各50px，效果如下：

<style>
    .father {
        margin-top: 50px;
        margin-left: 50px;
        width: 500px;
        height: 500px;
        background-color: skyblue;
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

在这里插入图片描述
在此基础上，对子级盒子使用绝对定位，并距离顶部和左侧各50px，父级盒子不做任何改变：

 .son {
 		/*绝对定位*/
        position: absolute;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 200px;
        background-color: pink;
    }

在这里插入图片描述
有人可能会疑惑：使用绝对定位后的效果和最初的效果怎么是一样的？
这是因为，绝对定位无父亲或无父亲定位，若父级标签没有使用相对定位，会默认以浏览器为基准进行改变；当父级标签设置了相对定位，那么子标签以父级标签为基准变化。

来看下面这个例子，对父级标签设置相对定位，子级盒子使用绝对定位进行位置改变，效果如下：

<style>
    .father {
    	/*相对定位*/
        position: relative;
        margin-top: 50px;
        margin-left: 50px;
        width: 500px;
        height: 500px;
        background-color: skyblue;
    }
    .son {    
    	/*绝对定位*/
        position: absolute;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

在这里插入图片描述
这个时候，子级盒子就会以父级盒子为基准进行位置更改。

固定定位

固定定位，脱离标准文档流，它会使盒子始终都存在，不会随着滚动条滚动；例如：在使用浏览器时，有的时候即使你在不停的滑动滚动条，某些广告或弹窗总是一直存在。

QQ录屏20221012113951

<style>
        .divA{
        	/*固定定位*/
            position: fixed;
            /*改变位置*/
            top: 100px;
            left: 40px;
        }
 </style>

粘性定位

粘性定位，脱离标准文档流，和固定定位不同的是它会使盒子随着滚动而滚动。

sticky

<style>
    .nav{
        /* 粘性定位 */
        position: sticky;
        width: 800px;
        height: 50px;
        background-color: pink;
        margin: 100px auto;
    }
 </style>

总结

相对定位
会保留原来的位置，不脱离标准文档流；
绝对定位
无父亲或无父亲定位
脱离标准文档流,不保留原本的位置
若父级标签没设相对定位，默认以浏览器为基准
当父级标签设置了相对定位，那么子标签以父级标签为基准变化
固定定位
脱离标准文档流，脱离页面固定在一个位置上，不会随着滚动条滚动
粘性定位
脱离标准文档流，会随着滚动条滚动

其中绝对定位和相对定位使用较多。