CSS（五）：定位

目录

相对定位

绝对定位

固定定位

在 CSS 中，position 属性用于控制元素的定位方式，使我们可以精确地控制元素在页面上的位置。定位分为相对定位、绝对定位、和固定定位

相对定位

相对定位：position: relative;

相对定位意味着元素的位置相对于它在正常文档流中的原始位置进行偏移。也就是说，元素在文档流中仍然占据原来的空间，但通过 top、left、right 和 bottom 属性，使元素相对当前位置进行调整

<div class="relative-box">相对定位的盒子</div>

<style>
  .relative-box {
    position: relative;
    top: 20px; /* 下移20px */
    left: 30px; /* 右移30px */
    background-color: lightblue;
    padding: 20px;
    width: 200px;
    height: 100px;
  }
</style>

在上面的例子中，.relative-box 元素将比原始位置下移 20px，右移 30px，原来的位置依然保留，但它在页面上的实际显示位置已发生变化

绝对定位

绝对定位 ：position: absolute

元素的位置相对于其最近的已定位父元素进行定位。

已定位指的是父元素设置了 position 属性值为 relative、absolute、fixed 或 sticky。

如果没有这样的父元素，元素会相对于 html 标签（即浏览器窗口）定位

注意，绝对定位的元素会脱离文档流，不再占据空间，其他元素会填充其原来的位置，原来的位置不会被保留，常用于弹窗等

<div class="parent">
  <div class="absolute-box">绝对定位的盒子</div>
</div>

<style>
  .parent {
    position: relative; /* 父元素设置定位 */
    width: 300px;
    height: 200px;
    background-color: lightgray;
  }

  .absolute-box {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 100px;
    height: 50px;
    background-color: lightcoral;
  }
</style>

在这个例子中，.absolute-box 元素相对于 .parent 元素进行绝对定位，top: 50px 和 left: 100px 表示 .absolute-box 会距离 .parent 元素的顶部 50px，距离左边 100px

固定定位

元素的位置相对于浏览器窗口固定，不论页面滚动到哪里，元素都会保持在窗口的固定位置

注意，固定定位的元素也会脱离文档流，不占据空间，常用于固定导航栏、浮动按钮等

<div class="fixed-box">固定定位的盒子</div>

<style>
  .fixed-box {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: lightgreen;
    padding: 20px;
    width: 150px;
    height: 100px;
  }
</style>

在这个例子中，.fixed-box 元素会固定在浏览器窗口的右上角，即使页面滚动，它的位置不会发生改变