CSS 中 position 属性使用详解

介绍

在 CSS 中，position 属性可以控制 HTML 元素的定位方式，可用于实现元素的绝对定位、相对定位、固定定位等效果。本文将详细介绍 position 属性的五个取值及其用法。

属性值

static

static 是 position 的默认值，表示元素采用正常的文档流布局，不会应用 top、bottom、left、right 或 z-index 属性的值。

relative

relative 表示相对定位，元素相对于其正常位置的偏移量根据 top、bottom、left、right 属性的值决定。相对定位不会影响其他元素的布局。

#box1 {
  position: relative;
  top: 20px;
  left: 30px;
}

上述代码表示将 id 为 box1 的元素相对于其正常位置向下偏移 20px，向右偏移 30px。

absolute

absolute 表示绝对定位，元素相对于其最近的已定位父元素或根元素（html）的偏移量根据 top、bottom、left、right 属性的值决定。如果没有已定位的父元素，则元素相对于根元素的偏移量决定。

#box2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

上述代码表示将 id 为 box2 的元素绝对定位在距离其最近的已定位父元素（或根元素）位置 50% 处，同时使用 transform 属性将元素自身向上、向左移动到中心位置。

fixed

fixed 表示固定定位，元素相对于浏览器窗口的偏移量根据 top、bottom、left、right 属性的值决定。元素不会随页面滚动而移动。

#box3 {
  position: fixed;
  top: 20px;
  right: 30px;
}

上述代码表示将 id 为 box3 的元素固定在页面窗口的右上角，距离窗口顶部 20px，距离窗口右侧 30px。

sticky

sticky 表示粘性定位，元素在滚动到一定位置时变为固定定位。粘性定位需要结合 top、bottom、left、right 属性使用。

#box4 {
  position: sticky;
  top: 0;
}

上述代码表示将 id 为 box4 的元素粘贴在页面顶部，当页面滚动到一定位置时，元素变为固定定位。

示例

示例一

<body>
  <div class="container">
    <h1>Relative Positioning Example</h1>
    <div class="box1">Box One</div>
    <div class="box2">Box Two</div>
    <div class="box3">Box Three</div>
  </div>
</body>

.container {
  position: relative;
}
.box1 {
  position: relative;
  top: 20px;
  left: 30px;
}
.box2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box3 {
  position: fixed;
  top: 20px;
  right: 30px;
}

上述代码表示将 .box1 元素相对于其父元素 .container 向下偏移 20px，向右偏移 30px，将 .box2 元素绝对定位在父元素 .container 中心位置，transform 属性实现居中，将 .box3 元素固定在页面窗口的右上角，距离窗口顶部 20px，距离窗口右侧 30px。

示例二

<body>
  <div class="container2">
    <h1>Sticky Positioning Example</h1>
    <div class="box4">Box Four</div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quisquam, dignissimos modi deleniti corporis odit itaque maxime. Deleniti in saepe, ea optio vel incidunt magnam quam eius illo omnis!</p>
      <p>Libero ipsam odit dolorem suscipit numquam dicta adipisci aspernatur ratione cumque laboriosam ex, commodi quaerat. In cum id minima magni aliquam unde libero omnis ducimus nam, recusandae placeat delectus.</p>
      <p>Iure aliquid exercitationem, blanditiis dolores amet similique laborum quia laboriosam aut facilis accusantium hic maxime eveniet cupiditate impedit! Voluptatibus, magnam pariatur libero officiis ducimus eaque numquam beatae fugit perspiciatis!</p>
    </div>
  </div>
</body>

.container2 {
  height: 400px;
  overflow-y: scroll;
}
.box4 {
  position: sticky;
  top: 0;
}
.content {
  margin-top: 300px;
}

上述代码表示将 .box4 元素粘贴在页面顶部，当页面滚动到一定位置时，元素变为固定定位。为了让页面产生滚动条，需要设置容器高度，并随着容器滚动，通过 margin-top 属性使内容始终在 .box4 元素下方（下移 300px）。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css中position属性使用详解 - Python技术站

css中position属性使用详解