白骑士的CSS教学语法基础篇之布局 2.5.2 定位布局

原创已于 2024-09-20 13:03:03 修改 · 724 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

于 2024-08-26 00:05:49 首次发布

教学同时被 2 个专栏收录

339 篇文章

订阅专栏

CSS

76 篇文章

订阅专栏

系列目录

上一篇：白骑士的CSS教学语法基础篇之布局 2.5.1 流式布局与固定布局

CSS 的定位属性为网页设计提供了灵活的布局和定位控制。通过理解不同的定位方式，可以创建更复杂和有趣的布局效果。CSS 提供了五种主要的定位方式：‘static‘、‘relative‘、‘absolute‘、‘fixed‘ 和 ‘sticky‘。每种定位方式都有其特定的应用场景和效果，掌握它们的使用方法可以极大提升你的布局技巧。

‘static‘ 定位

‘static‘ 是 CSS 的默认定位方式。使用 ‘static‘ 定位的元素会按照正常的文档流进行定位。这意味着元素会根据其在 HTML 中的位置进行布局，并不会受 ‘top‘、‘right‘、‘bottom‘ 和 ‘left‘ 属性的影响。

特点：

默认行为：所有未指定定位的元素都使用 ‘static‘ 定位。
不受偏移属性影响：‘top‘、‘right‘、‘bottom‘ 和 ‘left‘ 属性对 ‘static‘ 定位的元素不起作用。
文档流：元素在页面中的位置是基于其在文档中的顺序。

HTML示例：

<div class="static-box">Static Box</div>

CSS示例：

.static-box {
  width: 200px;
  height: 100px;
  background-color: lightcoral;
}

解释：

‘.static-box‘ 元素将按照文档流的位置进行布局，无法通过 ‘top‘、‘right‘、‘bottom‘ 和 ‘left‘ 属性调整位置。

‘relative‘ 定位

‘relative‘ 定位允许元素相对于其原始位置进行偏移。虽然元素的位置基于正常的文档流，但可以通过 ‘top‘、‘right‘、‘bottom‘ 和 ‘left‘ 属性对元素进行相对位置调整。

特点：

相对定位：元素的位置相对于其原始位置进行调整。
文档流：相对定位的元素仍然占据其在文档流中的空间。
偏移属性：‘top‘、‘right‘、‘bottom‘ 和 ‘left‘ 属性用来偏移元素的位置。

HTML示例：

<div class="relative-box">Relative Box</div>

CSS示例：

.relative-box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  position: relative;
  top: 20px;
  left: 30px;
}

解释：

‘.relative-box‘ 元素相对于其在文档流中的原始位置向下偏移 20px，向右偏移 30px。

‘absolute‘ 定位

‘absolute‘ 定位允许元素相对于最近的已定位的祖先元素（即具有 ‘relative‘、‘absolute‘、‘fixed‘ 或 ‘sticky‘ 定位的元素）进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是文档的根元素）进行定位。

特点：

绝对定位：元素的位置相对于最近的已定位祖先元素进行调整。
脱离文档流：绝对定位的元素不会占据空间，其他元素会按照正常的文档流进行布局。
偏移属性：使用 ‘top‘、‘right‘、‘bottom‘ 和 ‘left‘ 属性来精确定位元素。

HTML示例：

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

CSS示例：

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: lightgrey;
}

.absolute-box {
  width: 150px;
  height: 100px;
  background-color: lightgreen;
  position: absolute;
  top: 50px;
  left: 70px;
}

解释：

‘.absolute-box‘ 元素相对于 ‘.container‘ 元素进行定位，因为 ‘.container‘ 元素是最近的已定位祖先元素。该元素被定位在 ‘.container‘ 内部的 50px 位置向下，70px 位置向右。

‘fixed‘ 定位

‘fixed‘ 定位将元素固定在视口的某个位置，即使页面滚动，该元素的位置也不会改变。‘fixed‘ 定位的元素是相对于视口进行定位的，而不是相对于其包含块或文档流。

特点：

固定位置：元素的位置相对于视口固定，即使页面滚动也不会改变。
脱离文档流：固定定位的元素不占据空间，其他元素会按照正常的文档流进行布局。
偏移属性：使用 ‘top‘、‘right‘、‘bottom‘ 和 ‘left‘ 属性来确定元素的位置。

HTML示例：

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

CSS示例：

.fixed-box {
  width: 200px;
  height: 100px;
  background-color: lightpink;
  position: fixed;
  top: 20px;
  right: 20px;
}

解释：

‘.fixed-box‘ 元素固定在视口的右上角，即使用户滚动页面，它的位置也不会变化。

‘sticky‘ 定位

‘sticky‘ 定位是一种混合定位方式，结合了 ‘relative‘ 和 ‘fixed‘ 的特性。当元素的滚动位置达到指定的阈值时，元素会从相对定位变为固定定位。‘sticky‘ 定位是相对于其最近的滚动祖先元素进行定位的。

特点：

粘性定位：元素在滚动过程中会在某个阈值时变为固定定位。
相对定位：在达到固定位置前，元素以相对定位方式布局。
偏移属性：使用 ‘top‘、‘right‘、‘bottom‘ 和 ‘left‘ 属性来确定元素的粘性位置。

HTML示例：

<div class="sticky-container">
  <div class="sticky-box">Sticky Box</div>
  <p>Scroll down to see the sticky effect.</p>
  <!-- 内容用来生成滚动条 -->
  <div style="height: 1500px;"></div>
</div>

CSS示例：

.sticky-container {
  height: 300px;
  border: 1px solid #ddd;
  padding: 10px;
}

.sticky-box {
  width: 200px;
  height: 100px;
  background-color: lightgoldenrodyellow;
  position: sticky;
  top: 0; /* 在滚动到视口顶部时，元素会固定在顶部 */
}

解释：

‘.sticky-box‘ 元素在其滚动容器 ‘.sticky-container‘ 内部，当用户滚动页面到达元素的顶部时，元素会固定在视口顶部，滚动到达容器底部时，元素将继续滚动。

总结

CSS 的定位属性提供了强大的布局和定位功能，使得开发者能够创建各种复杂的网页设计。理解和掌握 ‘static‘、‘relative‘、‘absolute‘、‘fixed‘ 和 ‘sticky‘ 定位的使用方法，可以帮助你更好地控制元素的布局，提升页面的用户体验。不同的定位方式适用于不同的场景，合理选择和使用定位属性，可以使你的网页设计更具灵活性和表现力。

下一篇：白骑士的CSS教学语法基础篇之布局 2.5.3 Flexbox布局