CSS 属性 - Position

发布时间：2023-05-12

一、什么是Position？

Position是CSS中最基础的布局属性之一，它用于控制元素在页面中的定位方式，并且可以与CSS的其他布局属性配合使用，实现更加灵活的页面布局。 Position属性有以下4种取值：

  • static：默认值，元素在页面中按照正常文档流进行布局；
  • relative：元素在页面中按照正常文档流进行布局，但是可以通过设置top、right、bottom、left属性，调整元素相对于其正常文档流位置的偏移量；
  • absolute：元素脱离正常文档流，相对于最近的非static定位的祖先元素进行绝对定位；
  • fixed：元素脱离正常文档流，相对于浏览器窗口进行固定定位。
.example {
   position: relative;
   top: 50px;
   left: 20px;
}

二、Position与布局

Position属性可以配合其他CSS布局属性实现多种复杂布局效果。

Sticky Footer是一种常用的页面布局方式，它可以实现在内容较少时，将页面内容自动向下推至底部；而在内容较多时，将页脚固定在页面底部。这种布局方式可以通过使用Position和Flexbox属性来实现。

<!-- html部分 -->
<body>
    <div class="wrapper">
        <div class="content">
            <p>这里是页面内容</p>
        </div>
    </div>
    <div class="footer">这里是页脚</div>
</body>

/* css部分 */
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  /* flex属性用于实现子元素在容器内的分布 */
  display: flex;
  flex-direction: column;
}
.content {
  /* 容器中内容的可扩展性 */
  flex: 1;
}
.footer {
  /* 固定定位于底部 */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

2. Absolute Centering

Absolute Centering是一种将元素在其父容器内水平、垂直居中的布局方式，它可以使用Position属性和margin:auto属性轻松实现。

<!-- html部分 -->
<div class="wrapper">
    <div class="content">这个元素将会在其父容器内水平、垂直居中</div>
</div>

/* css部分 */
.wrapper {
  height: 400px;
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

三、Position与居中

Position属性可以配合其他CSS居中属性实现元素的不同类型居中。

1. 垂直居中

在某些特定的场景下，我们需要将一个元素在其父容器内垂直居中。这时，可以使用Position属性和margin属性来解决问题。

<!-- html部分 -->
<div class="wrapper">
    <div class="content">这个元素会垂直居中</div>
</div>

/* css部分 */
.wrapper {
  height: 400px;
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  /* 当前元素高度的50% */
  margin-top: -25px;
}

2. 水平、垂直居中

有时候，我们需要将一个元素在其父容器内水平、垂直居中。这时，可以使用Position属性、Flexbox属性、以及transform属性来实现。

<!-- html部分 -->
<div class="wrapper">
   <div class="content">这个元素会水平、垂直居中</div>
</div>

/* css部分 */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}
.content {
  position: relative;
  transform: translate(-50%, -50%);
}

四、总结

Position属性是CSS布局中最基础的属性之一，可以实现各种复杂的页面布局效果。同时，Position属性还可以配合其他CSS布局和居中属性实现更加灵活的页面布局方式。希望本文可以为大家介绍清楚Position属性的使用方法，同时也可以引导大家在页面布局中更加灵活地运用CSS。

推荐文章