position属性详解(static|relative|absolute|fixed|sticky)

最新推荐文章于 2025-12-23 11:33:59 发布

原创最新推荐文章于 2025-12-23 11:33:59 发布 · 837 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

css 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了CSS中position属性的五种取值：static、relative、absolute、fixed和sticky，包括它们的作用、特点以及实际应用示例，帮助理解各种定位方式如何影响元素布局。

一、staic——自然定位/常规定位/静态定位
把它叫做定位中的一股清流，回归本真
1、作用:是元素定位于常规/自然流中，即块、行垂直排列下去，行内元素水平从左到右
2、特点：

会忽略掉top、left、right、bottom或者z-index声明

首先写如下样式：一个父容器里面右三个块

<div class="container">
    <div class="box1">A</div>
    <div class="box2">B</div>
    <div class="box3">C</div>
</div>

 .container{
            border:1px solid black;
        }
        .container>div{
            width:100px;
            height:100px;
            line-height:100px;//文本垂直居中
            -moz-text-align:center;
            text-align: center;//文本水平居中
        }
        .box1{
            border:1px solid blue;
        }
        .box2{
            border:1px solid red;
        }
        .box3{
            border:1px solid blueviolet;
        }

在这里插入图片描述
把块A设置如下样式：

 .box1{
            border:1px solid blue;
            position:static;
            top:20px;
        }

结果图：
在这里插入图片描述
没有发生任何变化。说明设置static的元素是不受top影响的，left、right、bottom也一样

两个相邻的元素都设置了外边距，那么最终的外边距=两者外边距中最大的

把A、B块的样式设置如下

 .box1{
            border:1px solid blue;
            position:static;
            margin:20px 0;//设置上下边距20px,左右边距为0
        }
        .box2{
            border:1px solid red;
            position:static;
            margin:10px 0;//设置上下边距10px,左右边距为0
        }

结果图如下：
在这里插入图片描述
可以看到相邻的A、B块之间的间距并没有叠加为30px,而是选择了之间比较大的20px

具有固定的width和height值的元素，如果把左右外边距设置为auto，则左右外边距会自动扩大占满剩余宽度，造成的效果就是这个块水平居中

把C块样式设置如下：

 .box3{
            border:1px solid blueviolet;
            position:static;
            margin:auto;
        }

结果图如下：
在这里插入图片描述
可以看到C块水平居中了

二、relative——相对定位
1、作用： 使元素成为可定位的祖先元素，也就是说可以作为其它元素的一个参照物，一个标杆
2、特点

可以使用top|left|right|bottom|z-index进行相对定位，偏移的位置都是相对于自身的
相对定位的元素不会离开常规流，意思就是该元素偏移后但是它原来的位置还是会占着的，不会被其它元素覆盖
任何元素都可以设置相对定位，它的绝对定位的后代就可以相对于它进行绝对定位
可以使浮动元素发生偏移，并控制它们的堆叠顺序

（1）首先设置如下：都设置了浮动

 <div class="boxA">A</div>
 <div class="boxB">B</div>

       .boxA{
            border:1px solid blue;
            float:left;
        }
        .boxB{
            border:1px solid red;
            float:left;
        }

在这里插入图片描述
（2）然后给B块设置如下：

 .boxB{
            border:1px solid red;
            width:100px;
            height:100px;
            float:left;
            position:relative;
            left:-80px;
        }

在这里插入图片描述
（3）还可以用上z-index,给A、B加样式如下：

 .boxA{
            border:1px solid blue;
            width:100px;
            height:100px;
            float:left;
            z-index:1;
        }
        .boxB{
            border:1px solid red;
            width:100px;
            height:100px;
            float:left;
            position:relative;
            left:-80px;
            z-index:-1;
        }

在这里插入图片描述
可以发现A块跑到了上面
所以设置了relative属性后就可以使用left、top等偏移属性属性对元素进行定位

三、absolute——绝对定位
1、作用： 使元素脱离文档流
2、特点：

脱离常规流
进行定位偏移时默认的是相对于body进行偏移，如果其父元素设置了relative属性，则就是相对于其父元素进行定位
设置尺寸时要注意百分比是相对于谁的，是相对于最近的相对定位祖先元素
用于块元素居中：给元素设置绝对定位后给它加上left:0、right:0以及margin:auto后它就会居中；同时没有给绝对定位块元素设置宽高时再给它设置left:0和right:0那么该元素就会继承它父元素得宽高将父元素填充

（1）首先设置如下样式：

<div class="father">
      <div class="child"></div>
  </div>

  .father{
          width:300px;
          height:300px;
          background-color:yellow;
      }
        .child {
            width:100px;
            height:100px;
            background-color: palegreen;
        }

效果图如下
在这里插入图片描述
（2）然后给子元素进行绝对定位并设置偏移以及给父元素设置相对定位

 .father{
          width:300px;
          height:300px;
          background-color:yellow;
          position:relative;
      }
        .child {
            width: 100px;
            height: 100px;
            background-color: palegreen;
            position: absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin:auto;
        }

效果图如下：
在这里插入图片描述
可以发现子元素居中了，所以这个方法可以固定用于块元素的居中
（3）将子元素宽高不固定以后，给其设置left:0、right:0、top:0、bottom:0

  .child {
            background-color: palegreen;
            position: absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
        }

效果图如下：
在这里插入图片描述
可以发现子元素填充了父元素

四、fixed——固定定位
1、作用： 使元素脱离文档流，固定于视口的某个位置
2、特点：

固定元素不会随着视口的滚动而滚动
继承了absolute的特点

五、sticky——吸附定位|磁贴定位|粘性定位
1、作用 ：relative+fixed的完美结合，制造出吸附效果
2、特点：

如果产生偏移，原位置还是会在标准流中
如果它的最近祖先元素有滚动，那么它的偏移尺寸就是相对于最近的祖先元素
如果最近的祖先元素没有滚动，那么它的偏移尺寸是相对于视口
上下左右的偏移原则（left、right、top、bottom）

 <div class="logo">想象我是一张logo图</div>
  <div class="nav">《返回 | 首页 | 下载 | 收藏 | 分享 | 下一页》</div>
  <div class="content"><p>我是该页面的内容模块 我是该页面的内容模块</p>
      <p>我是该页面的内容模块 我是该页面的内容模块</p>
      <p>我是该页面的内容模块 我是该页面的内容模块</p>
      <p>我是该页面的内容模块 我是该页面的内容模块</p>
      <p>我是该页面的内容模块 我是该页面的内容模块</p>
      <p>我是该页面的内容模块 我是该页面的内容模块</p>
      <p>我是该页面的内容模块 我是该页面的内容模块</p>
  </div>

body{
            height:2000px;
        }
        .logo{
            width:100%;
            height:100px;
            background-color: rgba(255, 255, 0, 0.27);
        }
        .nav{
            width:100%;
            height:30px;
            background-color: rgba(128, 128, 128, 0.47);
            text-align:center;
            position:sticky;
            top:10px;
        }
        .content{
            width:100%;
            text-align:center;
            background-color: rgba(0, 0, 255, 0.18);
        }
        .content>p{
            margin:60px 0;
        }