布局大师的秘籍：玩转CSS定位，创造惊艳的页面布局效果！

前言

在前端开发中，定位布局是我们经常会用到的一个技术，而在CSS中，position属性就是控制元素定位的重要属性之一。今天让我们一起来探讨一下position属性的各种取值和其使用场景吧！

1.开始前准备

在开始之前我们要进行一些基础的准备工作。创建两个基础盒子便于我们之后的效果展示。 首先是html部分：

<div class="box1">
     <div class="box2"></div>
</div>

接下来是css部分，使我们可以在页面上更为直观的看到这两个盒子：

.box1 {
    width: 200px;
    height: 200px;
    background-color: pink;
}

.box2 {
    width: 50px;
    height: 50px;
    background-color: #000;
}

效果图如下：

1. 相对定位（Relative Positioning）

首先，我们要提到的就是position: relative; 相对定位。用于在前端开发中控制元素相对于其在正常文档流中的位置进行微调。相对定位的元素仍然占据页面中的空间，并且相对于其在文档流中的位置进行定位,也就是说按照浏览器的原默认位置进行定位。

举个例子，如果我们希望黑盒子整体向右偏移50px，该怎么办呢？其实这非常简单，只需要说明你的定位方式以及偏移量就可以实现了。

.box1 {
    width: 200px;
    height: 200px;
    background-color: pink;
    position: relative; //相对定位
    left: 50px; //偏移量
}

.box2 {
    width: 50px;
    height: 50px;
    background-color: #000;
}

效果展示：

2. 绝对定位（Absolute Positioning）

接着，再来说说position: absolute; 绝对定位。现在对上方需求进行一个小修改，如果我们希望黑盒子出现在粉盒子的右下角该怎么办呢？

当然，你用上面介绍的相对定位就可以解决，你只需要将黑盒子的偏移量设置为合适的大小就可以实现这个目标。但是实现这个方式的前提是你知道这两个盒子的大小，那么如果你不知道这两个盒子的大小（比如行内元素，长宽由内含内容决定）你又该怎么实现呢？这就轮到相对定位出场了。

.box1 {
    width: 200px;
    height: 200px;
    background-color: pink;
    position: relative;/*参考系 相对定位*/           
}

.box2 {
    width: 50px;
    height: 50px;
    background-color: #000;
    /* 绝对定位 */
    position: absolute;
    right: 0; /* 距离右边为0 */
    bottom: 0; /* 距离下方为0 */
}

效果展示：

相信细心的朋友已经发现了，我们在第一个盒子上也加入了position: relative;,这是为什么呢？

就像在人生中，有时候我们需要找到一个榜样，以便更好地定位自己，在页面布局中，绝对定位的元素也是需要相对于其最近的具有定位属性的父元素来定位的。当一个元素拥有绝对定位时,它就会向上寻找自己的榜样(同样具有定位属性），如果没有就以整个页面作为榜样。

那么，想象一下如果去掉box1的position: relative;会变成什么样？就像下面这样。

3. 相对定位和绝对定位的区别

相对定位（Relative Positioning）：

• 相对于自身位置移动：  相对定位元素相对于其在正常文档流中的位置进行移动，移动时不影响周围元素的布局。
• 保留空间：  元素在文档流中仍保留空间，周围元素会根据其原始位置继续布局。
• 常用于微调：  适合用于使元素微调其位置或作为绝对定位元素的参考点。

绝对定位（Absolute Positioning）：

• 相对于定位父元素或文档：  元素相对于最近具有定位属性的父元素进行定位，如果没有定位的父元素，则相对于文档进行定位。
• 脱离文档流：  绝对定位元素脱离正常文档流，不再占据页面中的位置，其他元素不再在页面中留出该元素原本所占据的空间。
• 位置控制更精确：  可以通过top, bottom, left, right属性精确控制元素在页面中的位置，不受周围元素影响。
• 适合绝对布局：  适用于创建特定位置的元素，如弹出框、悬浮菜单等，不受页面结构影响。

总结：

• 相对定位用于微调元素相对于自身位置的位置。
• 绝对定位适合创建脱离文档流的元素，并精确控制元素位置。

4. 固定定位（Fixed Positioning）

5. 粘性定位（Sticky Positioning）

最后，我们还有粘性定位position: sticky;，允许元素在页面滚动时保持在特定位置，直到滚动到指定位置时固定在那里。这种定位方式结合了相对定位和固定定位的特性，可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

• 基本属性和行为:

  • 使用CSS属性 position: sticky; 来定义粘性定位的元素。
  • 设置 top, bottom, left, right 属性可调整元素粘性生效的范围。
  • 可以在任何时候启用或禁用元素的粘性效果。通常，元素会在滚动到其容器的顶部时开始粘性效果。

• 基本工作原理:

  • 元素会像相对定位一样正常渲染，直到滚动视图时超过指定的偏移值（如 top: 20px;）时，它将变为固定定位。
  • 一旦元素固定在指定位置，它将保持在那里直到其父容器末尾，然后恢复到正常文档流中。

• 适用场景:

  • 悬浮导航栏或工具栏，使用户能够方便地导航网页。
  • 表格中的标题行或列，使其在滚动表格内容时保持可见。
  • 滚动时固定在页面上方的广告条或联系方式。

6. 层叠顺序（Z-index）

• 属性：  使用z-index控制元素的显示顺序。

• 特点：

  • z-index值较大的元素将显示在其他元素之上，默认值为0

• 应用场景：

  • 在需要覆盖其他元素的情况下使用，如弹出框、悬浮菜单等。

7. 结语

希望通过这篇博客，你对position属性有了更深入的了解，也能在实际项目中灵活运用，创造出更出色的界面布局效果！今天的内容就到这里了，如果你觉得小编写的还不错，或者对你有所启发，请给小编一个鼓励的赞吧。