【前端基础】1 - 7 定位

§1-7 定位

目录

• §1-7 定位
  • 1-7.1 定位方式
    • 1-7.1.1 相对定位
    • 1-7.1.2 绝对定位
    • 1-7.1.3 固定定位
  • 1-7.2 堆叠顺序
  • 1-7.3 定位小结

1-7.1 定位方式

定位的作用是灵活地改变元素在网页中的位置。通过使用属性 position 以及边偏移属性实现（top, right, bottom, left）。

定位在许多网页中都有应用，例如京东的轮播图、淘宝（2024 年春节期间）首页左右两侧背景图等。

首先，先来了解网页元素的定位方式，使用属性 position 控制（节选）：

值	说明
relative	元素基于正常布局的位置相对定位，边偏移生效
absolute	元素移出标准流，无预留空间，绝对定位，边偏移生效
fixed	元素溢出标准流，无预留空间，固定定位，边偏移生效

1-7.1.1 相对定位

元素的相对定位可由属性 position: relative 控制。相对定位的元素具有以下特点：

• 元素相对于自身在标准流布局中的位置发生偏移；
• 不改变元素的显示模式；
• 元素仍保留在标准流中，可能会造成网页留白；

一般不会单独使用相对定位，而会结合其他定位方式与其他元素一起使用。

示例：

<!-- 相对定位元素不脱标、显示模式不变测试 -->
<p>Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或现有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
<p>Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或现有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
<p>Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或现有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>

<div class="image">
    <img src="../../resources/images/cat.webp" alt="小猫咪">
</div>

<p>Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或现有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
<p>Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或现有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
<p>Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或现有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>

* {
    box-sizing: border-box;
}

div.image {
    position: relative;
    top: 20px;
    left: 20px;
}

打开浏览器查看网页，会发现由于 .image 在相对定位模式下发生偏移，页面宽度被撑开。

1-7.1.2 绝对定位

绝对定位由 position: absolute 控制。绝对定位的元素具有以下特点：

• 绝对定位的元素需要借助某一个参考元素来定位，要么相对于其最近的已定位的父级元素（若有的话），否则相对于浏览器可视区域修改位置；
• 元素脱标，不预留位置；
• 元素的显示模式修改为行内块；

使用场景：子级绝对定位，父级相对定位。

示例一：子级相对于父级绝对定位，父级相对定位。

<div class="news">
    <img src="../../resources/images/news.jpg" alt="新闻背景图">
    <span class="type">展会活动</span>
    <p class="newsHeading">2222 世界移动大会（MWC）</p>
</div>

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

.news {
    position: relative;

    margin: 100px auto;
    width: 400px;
    height: 350px;
    border-radius: 10px;

    overflow: hidden;

    background-color: #f8f8f8;
}

.news img {
    width: 400px;
}

.news .type {
    /* 让活动类型右上角显示 */
    position: absolute;
    top: 0;
    right: 0;

    display: block;
    width: 92px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.6);

    text-align: center;
    line-height: 32px;
    color: #fff;
}

.news .newsHeading {
    padding-top: 15px;

    font-size: 18px;
    font-weight: bold;

    text-indent: 1.5em;
}

示例二：元素直接相对于浏览器视口居中显示。

这里我们使用一张登录弹窗的截图模拟居中显示在浏览器视口的场景。很明显该元素不需要内嵌在相对定位的父元素中，而是直接定义为绝对定位即可。使用 top: 50%; left: 50%; 将窗口的位置移动至浏览器视口中央。

但注意，此时窗口并未居中显示，真正居中显示的是该窗口的左上角的像素。若让窗口真正居中显示，还需要额外得调整。

一方面可以使用 margin 属性调整外边距，另一方面还可使用 transform: translate(-50%, -50%); 调整。这里使用后者调整，更为方便。

<div class="login">
    <img src="../../resources/images/login.webp" alt="登录弹窗">
</div>

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

.login {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

transform 属性允许旋转、缩放、倾斜或平移元素。该属性一般接受一个或多个变形函数值，在本例中使用平移函数 translate 将元素平移。

1-7.1.3 固定定位

固定定位可实现元素不随页面滚动而滚动，由 position: fixed 控制。固定定位元素具有以下特点：

• 元素脱标，不预留空间；
• 元素相对于浏览器视口定位；
• 元素显示模式修改为行内块；

固定定位常用于顶部导航栏或搜索栏、右侧辅助功能栏等。

示例：修改自前文的相对定位示例，修改其 CSS 源码，使得图片变为固定定位。

* {
    box-sizing: border-box;
}

div.image {
    position: fixed;
    width: 150px;
    height: 150px;

    top: 0;
    left: 0;
}

.image img {
    width: inherit;
    height: inherit;
}

1-7.2 堆叠顺序

一般而言，元素按照书写的顺序，后来者居上堆叠显示。这在多个使用了定位且具有重叠区域的元素中十分明显。

示例：默认情况下的后来者居上堆叠顺序。

<div class="pink">粉色</div>
<div class="blue">蓝色</div>

* {
    box-sizing: border-box;
}

div {
    position: absolute;

    width: 100px;
    height: 100px;
    border-radius: 10px;

    text-align: center;
    line-height: 100px;
}

.pink {
    background-color: pink;
    color: #c0341d;
}

.blue {
    left: 75px;

    background-color: cornflowerblue;
    color: azure;
}

效果如图：

堆叠顺序可由属性 z-index 修改，该属性接受整数数值，数值越大，元素显示顺序越大。

现修改粉色色块最先显示：

* {
    box-sizing: border-box;
}

div {
    position: absolute;

    width: 100px;
    height: 100px;
    border-radius: 10px;

    text-align: center;
    line-height: 100px;
}

.pink {
    z-index: 1;

    background-color: pink;
    color: #c0341d;
}

.blue {
    left: 75px;

    background-color: cornflowerblue;
    color: azure;
}

效果如图：

1-7.3 定位小结

元素定位的有关内容可总结如下：

定位方式	属性值	元素脱标	显示模式	参照物
相对定位	relative	否	保持原样	标准流中的原位置
绝对定位	absolute	是	行内块	最近已定位父元素或浏览器视口
固定定位	fixed	是	行内块	浏览器视口

绝对定位一般与相对定位联用，子级绝对，父级相对。

固定定位一般可用在弹窗居中，但还需使用 transform: translate() 调整弹窗位置。