详细了解postion定位布局

最新推荐文章于 2024-04-21 22:38:54 发布

前端小罗

最新推荐文章于 2024-04-21 22:38:54 发布

阅读量3k

点赞数 1

分类专栏： css

本文链接：https://blog.youkuaiyun.com/weixin_43983960/article/details/116884439

版权

css 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了CSS定位布局中的position属性，包括固定定位、相对定位、绝对定位和静态定位。重点讲解了它们的工作原理和应用场景，帮助开发者更准确地定位页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人在前端面试中也经常被问到这个定位布局，所以这次彻底了解清楚。除了定位布局，还有浮动布局比较灵活，但是不容易控制。而定位布局的出现，使得用户精准定位页面中的任意元素成为可能，此时页面布局操作也变得更加随心所欲。因此在实际开发中，灵活使用这两种布局方式，更好地满足开发需求。

一，定位布局的介绍

对于定位布局，position属性取值如下表所示。

属性值	说明	作用的位置对象
fixed	固定定位	相对于浏览器四条边的位置
relative	相对定位	相对于元素相对原始的位置
absolute	绝对定位	（默认浏览器）常用于相对于父级元素来定位布局元素的位置
static	静态定位（默认值）	正常的文档流显示

二，属性值的详细介绍

1. 固定定位

固定定位是最直观也是最容易理解的定位方式，在CSS中，我们可以使用“position:fixed;”来实现固定定位元素。
语法：

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;

说明：
position:fixed让元素成为固定定位元素，使用这4个坐标属性来设置元素 相对于相对浏览器4条边位置。
一般使用其中top，left两个位置属性的大小，来设置元素定位就可以了，最常用于，右下角实现“回顶部特效”

2. 相对定位

语法：

position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;

说明：
position:relative;让元素成为相对定位元素，使用这4个坐标属性来设置元素 相对原始的位置。
参考演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #contaner{
            margin:10px;
            border:1px solid blue;
        }
        #box1 div{
            width:100px;
            height:60px;
            margin:10px;
            border:1px solid blue;
        }
        #box2{
            /*当设置了box2为相对定位时，就出现红色的box2的情况*/  
               position:relative;
			   top:30px;
			   left:60px;
			   border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="contaner">
        <div id="box1">无定位的div元素</div>
        <div id="box2">相对定位的div元素</div>
        <div id="box3">无定位的div元素</div>
    </div>
</body>
</html>

参考图说明
在这里插入图片描述

3. 绝对定位

使用“position:absolute;”实现绝对定位。绝对定位使用最为广泛，它能够很精确地把元素定位到你想要指定的位置上。
同时，这个元素也会完全脱离文档流了，定位的元素的前面或后面的元素会认为这个元素并不存在，定位的元素就会浮于其他元素上面，完全独立出来了。
语法：

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;

说明：
常见用法是在元素父级增加相对定位，然后使用绝对定位，设置四个坐标属性值，来相对于父级来定位元素的位置。
对于前面3种定位方式，总结一下：默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。

4. 静态定位（了解即可）

static定位用的很少，在默认情况下，标签元素没有指定position属性时，这个元素就是静态定位的。同时，元素的position属性的默认值是static。