CSS之元素定位

元素定位

一、什么是元素定位

• 元素定位（CSS Positioning） 是指通过CSS的 position 属性控制HTML元素在页面中的布局方式。它决定了元素如何相对于其父元素、视口或其他元素进行位置调整。

• CSS的 position 属性用于控制元素在页面上的定位方式，主要有5种：

  • static（默认）
  • relative
  • absolute
  • fixed
  • sticky

定位相关属性

• top / right / bottom / left（偏移量）
• z-index（层级控制）

二、元素定位详解

1.静态定位（Static）

• 默认定位方式，元素按照正常文档流排列。
• top / right / bottom / left 无效。

2.相对定位（Relative）

• 相对于自身原本位置进行偏移。
• 不脱离文档流，原位置仍保留。

代码示例

.box {
  position: relative;
  top: 20px;  /* 向下偏移20px */
  left: 30px; /* 向右偏移30px */
  background: lightblue;
}

效果：

• 元素从原位置移动，但原空间仍占位。

3.绝对定位(Absolute)

• 相对于最近的非 static 父元素定位。
• 脱离文档流，原位置不保留。

html代码

<div class="parent">
  <div class="box absolute-box">Absolute Box</div>
</div>

css代码

.parent {
  position: relative; /* 父元素设为 relative */
  height: 200px;
  border: 2px dashed #666;
}

.absolute-box {
  position: absolute;
  bottom: 10px;  /* 距离父元素底部10px */
  right: 10px;   /* 距离父元素右侧10px */
  background: coral;
}

关键点：

• 父元素需设置 position: relative（否则相对于 <body> 定位）

4.固定定位（Fixed）

• **相对于浏览器视口（viewport）**定位。
• 脱离文档流，滚动页面时位置不变。

html代码

<div class="box fixed-box">Fixed Box</div>

css代码

.fixed-box {
  position: fixed;
  top: 20px;
  right: 20px;
  background: gold;
}

典型应用：

• 固定导航栏、返回顶部按钮、悬浮广告

5.粘性定位（Sticky）

• 混合 relative 和 fixed，滚动到阈值时固定。
• 需指定 top / bottom / left / right。

html代码

<div class="sticky-box">Sticky Box</div>
<div style="height: 1000px;">滚动区域</div>

css代码

.sticky-box {
  position: sticky;
  top: 0;       /* 距离视口顶部0px时固定 */
  background: limegreen;
}

适用场景：

• 表格标题固定、吸顶导航栏。

6.z-index层级控制

• 控制定位元素的堆叠顺序（数值越大越靠前）。
• 仅对 position 非 static 的元素生效。

html代码

<div class="box box1">Box 1 (z-index: 2)</div>
<div class="box box2">Box 2 (z-index: 1)</div>

css代码

.box1 {
  position: relative;
  z-index: 2;
  background: rgba(255, 0, 0, 0.7);
}
.box2 {
  position: relative;
  top: -20px;
  left: 20px;
  z-index: 1;
  background: rgba(0, 0, 255, 0.7);
}

效果：

• box1 覆盖 box2（因 z-index 更大）。

三、总结

1. 是否需要脱离文档流？
   • 是 → 选 absolute 或 fixed。
   • 否 → 选 relative 或 sticky。
2. 是否需要滚动时固定？
   • 是 → 选 sticky 或 fixed。
3. 是否需要相对于父元素定位？
   • 是 → 父元素设 relative，子元素用 absolute。

案例：

需求：固定顶部导航栏

html代码

<div class="navbar">导航栏</div>

css代码

<style>
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #333;
      color: white;
      padding: 10px;
    }
</style>

效果

css代码*

<style>
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #333;
      color: white;
      padding: 10px;
    }
</style>

效果