如何在CSS中使用位置和Z-Index创建布局特征

作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。

介绍

网站用户界面 (UI) 的元素可以以多种不同的方式相互交互和叠加，这使得 CSS 布局难以控制。设置元素的位置以及它如何覆盖其他元素的一种方法是结合使用 position 属性、z-index 属性和 方向属性，它们适用top、right、bottom 和 left 的间距值。使用这些 CSS 属性的经验将使您能够高效、快速地创建下拉导航栏和图形标题等 UI 元素。

在本教程中，您将创建一个在标题中带有导航元素的内容页面。导航元素将包含一个下拉子导航组件，并且标题本身将在页面滚动时附加到页面顶部。您将使用 position 属性及其值 relative、absolute 和 fixed 以及一些方向属性来创建此效果。然后，您将使用 z-index 属性并使用该属性管理元素分层。

先决条件

类型选择器、组合选择器和选择器组的知识，您可以在如何选择 HTML 元素以使用 CSS 设置样式中找到这些知识。
CSS盒子模型的经验，你可以在如何在CSS中使用盒子模型教程中找到。
了解 HTML Table 元素及其视觉属性，您可以在 How To Style a Table with CSS 教程中了解这些内容。
在您的本地计算机上保存为 index.html 的空 HTML 文件，您可以从您选择的文本编辑器和 Web 浏览器访问该文件。要开始使用，请查看我们的如何设置您的 HTML 项目教程，并按照如何使用和理解 HTML 元素获取有关如何在浏览器中查看 HTML 的说明。如果您是 HTML 新手，请尝试整个如何用 HTML 构建网站系列。

设置示例网页和初始 `position` 值

所有 HTML 元素的默认 position 值为 static，这构成了正常的内容流。 static 状态不受 z-index 属性或任何方向属性的影响。为了在您的网页布局中引入更多灵活性，您稍后将更改 position 的值，使其远离此默认值。在本节中，您将为月球旅行网站的页面创建内容，并将更改应用到元素的 position。

首先，在文本编辑器中打开 index.html 文件。然后，将以下 HTML 添加到文件中：

索引.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Destination: Moon</title>
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700&display=swap" rel="stylesheet">
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
  </body>
</html>

在这个 HTML 片段中，<meta> 元素定义了用于文本的字符集。这将使大多数特殊字符（例如重音符号）在没有特殊 HTML 代码的情况下呈现。 <title> 元素为浏览器提供页面的标题。前三个 <link> 元素以 Google 字体的自定义字体 Museo Moderno 加载，最后一个加载您将添加到 styles.css 的样式文件。

接下来，用内容填充页面，以便您可以设置样式。您将使用来自 Sagan Ipsum 的示例内容作为填充副本来处理样式。在文本编辑器中返回 index.html 并添加以下代码块中突出显示的 HTML：

索引.html

<html>
  <head>
    ...
  </head>
  <body>
    <main>
      <h2>Schedule Your Trip</h2>
      <p>Intelligent beings made in the interiors of collapsing stars vanquish the impossible gathered by gravity not a sunrise but a galaxyrise how far away. Extraordinary claims require extraordinary evidence dispassionate extraterrestrial observer a very small stage in a vast cosmic arena descended from astronomers as a patch of light the ash of stellar alchemy. Concept of the number one citizens of distant epochs with pretty stories for which there's little good evidence with pretty stories for which there's little good evidence the carbon in our apple pies a mote of dust suspended in a sunbeam.</p>

      <p>Drake Equation white dwarf something incredible is waiting to be known tesseract quasar dispassionate extraterrestrial observer? Concept of the number one intelligent beings kindling the energy hidden in matter extraordinary claims require extraordinary evidence network of wormholes Euclid? Vanquish the impossible citizens of distant epochs as a patch of light inconspicuous motes of rock and gas made in the interiors of collapsing stars a mote of dust suspended in a sunbeam.</p>
  
      <figure>
        <img src="images/moon.jpg" alt="The Moon during twilight" />
        <figcaption>Photo by <a href="https://unsplash.com/@ilypnytskyi?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Igor Lypnytskyi</a> on <a href="https://unsplash.com/collections/9479529/moon?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></figcaption>
      </figure>
  
      <p>Citizens of distant epochs rings of Uranus intelligent beings birth take root and flourish across the centuries. Corpus callosum invent the universe as a patch of light the only home we've ever known a mote of dust suspended in a sunbeam made in the interiors of collapsing stars. Kindling the energy hidden in matter Orion's sword Sea of Tranquility great turbulent clouds with pretty stories for which there's little good evidence extraordinary claims require extraordinary evidence.</p>

      <p>A billion trillion take root and flourish extraplanetary gathered by gravity hearts of the stars consciousness. Dispassionate extraterrestrial observer Orion's sword are creatures of the cosmos realm of the galaxies descended from astronomers white dwarf. The carbon in our apple pies globular star cluster across the centuries a very small stage in a vast cosmic arena radio telescope vanquish the impossible. Vastness is bearable only through love emerged into consciousness not a sunrise but a galaxyrise emerged into consciousness courage of our questions across the centuries and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
    </main>
  </body>
</html>

您刚刚添加到 index.html 的代码创建了一个标题和四个位于 <main> 元素内的段落。在第二段之后，会创建一个 <figure> 元素以在第二段之后加载 moon.jpg 图像。 <figure> 元素还包括一个 <figcaption> 元素，其中包含图像的引用信息。将更改保存到 index.html。

为了显示此处链接的图像，您需要 Moon Image。首先，在与您的 index.html 文件相同的文件夹中创建一个 images 目录：

mkdir images

使用浏览器将此文件下载到新创建的 images 目录，或使用以下 curl 命令通过命令行下载：

curl -sL https://assets.digitalocean.com/articles/68084/moon.jpg -o images/moon.jpg

现在你有了你的图像，打开你的网络浏览器。选择 File 菜单项，然后选择 Open 选项以在浏览器中加载您的 index.html 文件。下图演示了此 HTML 将如何在浏览器中呈现：

接下来，您将开始编写样式。返回文本编辑器并打开 styles.css。以下代码块包含 body、main、figure、img 和 h2 元素的开始样式：

样式.css

body {
  margin: 0;
  font: 1rem / 1.5 sans-serif;
}

main {
  margin: 6rem auto;
  width: 95%;
  max-width: 75ch;
  font-size: 1.125rem;
}

figure {
  margin: 2rem 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
}

h2 {
  font: 400 1.875rem/1.25 MuseoModerno, sans-serif;
  color: hsl(300, 40%, 30%);
}

将添加的内容保存到 styles.css，然后返回浏览器并刷新 index.html。样式现在将组合在一起，设置默认字体大小，内容区域以页面为中心，图像占用适当的空间。下图演示了它是如何在浏览器中呈现的：

在文本编辑器中返回 styles.css。然后，从以下代码块中添加突出显示的 CSS 来定义月球图像的标题：

样式.css

...
figcaption {
  display: inline-block;
  color: white;
  background-color: hsl(210, 40%, 10%);
  padding: 0.25rem 1rem;
}

figcaption a {
  color: inherit;
}

figcaption 元素选择器将图像设置为 inline-block 以使其仅与内容一样宽。 figcaption 上的样式也将背景设置为深紫色，带有白色文本，周围有一点填充。然后，figcaption a 后代选择器将 color 值设置为 inherit，以便它使用其父级的 white 而不是默认的 blue。

保存添加到 styles.css 并在浏览器中刷新 index.html。 <figcaption> 元素现在将显示为带有一些白色文本的深色背景块，如下图所示：

接下来，要开始使用 position 属性，请在文本编辑器中返回 styles.css。在 figcaption 元素选择器块中，添加 position 属性。然后使用 relative 值，如以下代码块中突出显示的那样：

样式.css

...
figcaption {
  position: relative;
  display: inline-block;
  color: white;
  background-color: hsl(210, 40%, 10%);
  padding: 0.25rem 1rem;
}
...

在内容流方面，position 属性的 relative 值与 static 的行为相同。但与 static 默认值不同的是，relative 值可以使用方向属性和 z-index 属性来移动放置和分层选项。

将此更改保存到您的 styles.css 并返回浏览器以刷新 index.html。您会发现新属性没有任何区别。

在本节中，您将为项目设置初始 HTML 和 CSS。您还编写了第一个 position 属性，将 ficaption 值设置为 relative。在下一节中，您将应用方向属性来移动和定位图像上的 figcaption 内容。

放置具有方向属性的元素

有四个方向属性：top、bottom、right和left。这些属性仅适用于将 position 设置为 static 以外的任何有效值的元素。这四个属性中的每一个都接受任何基于单位的正或负数值，包括百分比。它们还接受 auto 的关键字值，可用于将这些属性设置回默认值。在此步骤中，您将使用这些属性沿这四个方向之一移动 figcaption 元素。

要开始使用方向属性，请在文本编辑器中打开 styles.css。返回到 figcaption 元素选择器并在 position 属性和值之后添加 top 属性：

样式.css

...
figcaption {
  position: relative;
  top: -4rem;
  display: inline-block;
  color: white;
  background-color: hsl(210, 40%, 10%);
  padding: 0.25rem 1rem;
}
...

在此代码中，您将 top 的值设置为 -4rem。 top 属性的正值会将元素从顶部向下推，但负值会将元素向上拉离其初始位置的顶部边缘。

将更改保存到 styles.css，然后在 Web 浏览器中打开 index.html。标题信息现在覆盖照片并拥抱左侧，如下图所示：

该元素位于左侧，因为此浏览器的默认语言设置为从左到右的方向。如果将浏览器或页面设置为从右到左的语言，则 position 元素将位于图像的右侧。

将 position 值设置为 relative 时，方向属性的影响是有限的。将方向属性值设置为 0 时，预期和预期的结果是元素沿着那一侧没有间距，但 relative 值只会在不中断的情况下执行此操作页面内容的正常流动。

要在实践中查看此限制，请删除 top 属性并添加以下 right 和 bottom 属性：

样式.css

...
figcaption {
  position: relative;
  right: 0;
  bottom: 1rem;
  display: inline-block;
  color: white;
  background-color: hsl(210, 40%, 10%);
  padding: 0.25rem 1rem;
}
...

在此代码段中，您将 right 属性设置为 0 的值。接下来，您添加了一个值为 1rem 的 bottom 属性。保存对 styles.css 的更改，然后在浏览器中刷新 index.html。预期的行为是 <figcaption> 元素位于右侧并悬停在照片底部上方一点点。但是，如下图所示，该元素仍在左侧，仅略高于照片：

在本节中，您使用了四个方向属性中的三个来将 <figcaption> 元素移动到照片上。方向属性只能用于使用 static 以外的关键字值的 position 元素，并且方向属性仅限于所有内容都可以与 relative 值对齐的地方. 在下一节中，您将 position 的值从 relative 更改为 absolute 以解决此问题。

使用 `relative` 和 `absolute` 关系

static 和 relative 的 position 值与页面内容流的交互方式相似。您可以使用带有 relative 值的方向属性来移动页面布局中的元素，但这种移动不会破坏内容的流动。在本节中，您将使用 absolute 值来更精确地控制和调整元素如何与页面内容一起工作。

在文本编辑器中打开 styles.css 并转到 figcaption 元素选择器。然后，将 position 属性值从 relative 更改为 absolute，如以下代码块中突出显示的那样：

样式.css

...
figcaption {
  position: absolute;
  right: 0;
  bottom: 1rem;
  display: inline-block;
  color: white;
  background-color: hsl(210, 40%, 10%);
  padding: 0.25rem 1rem;
}
...

将此属性值保存到 styles.css。接下来，返回浏览器刷新index.html。该元素现在位于整个页面的右侧，并且在滚动到页面顶部时与窗口底部对齐。下图展示了如何在浏览器中呈现此代码更改：

当您将 position 值从 relative 更改为 absolute 时，absolute 元素需要一个上下文来应用方向属性值。上下文由也具有 position 值的祖先元素定义。当浏览器找不到具有 position 值的祖先时，上下文将成为浏览器的窗口。在这种情况下，bottom 值将元素 1rem 从浏览器窗口的底部向上放置。然后，right 属性沿窗口的右边缘设置元素。

为了让 <figcaption> 覆盖照片并与照片的最右侧边缘对齐，需要更改上下文。您可以通过将 position 属性应用于设置为 relative 值的最接近的祖先元素来执行此操作。这将为 <figcaption> 元素提供方向属性移动元素的起点。

要开始为 <figcaption> 元素设置新的上下文，请在文本编辑器中返回 styles.css。接下来，转到 figure 元素选择器，因为 <figure> 元素是 <figcaption> 的最近祖先。在 figure 选择器块中，添加一个设置为值 relative 的新 position 属性，如以下代码块中突出显示的那样：

样式.css

...
figure {
  margin: 2rem 0;
  padding: 0;
  position: relative;
}
...

将此更新保存到 styles.css，然后在 Web 浏览器中刷新 index.html。 <figcaption> 从页面的右下角移动到照片的右下角。下图显示了更改是如何在浏览器中呈现的：

您现在已经控制了 absolute 定位元素的放置，方法是使用 relative 和 absolute 的组合来微调预期元素的放置位置。在下一节中，您将使用所学的知识来创建更高级的 absolute 定位，以创建基于悬停的下拉导航。

使用`absolute`定位制作下拉导航栏

position 属性更常见的用途之一是用于下拉导航系统。在本节中，您将编写 HTML，然后编写样式以创建带有下拉导航的站点标题，该导航由悬停交互激活。

要开始创建下拉导航，请在文本编辑器中打开 index.html。然后在 <body> 标签内的 <main> 元素之前创建一个 <header> 元素。在 <header> 中，您将为页面创建一个 <h1> 标题，然后是一个填充有嵌套无序列表的 <nav> 标记：

索引.html

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    <header>
      <h1>Destination: <strong>Moon</strong></h1>
      <nav>
        <ul class="nav nav-main">
          <li class="item-top">
            <a href="#" class="link link-top">Base Station</a>
          </li>
          <li class="item-top">
            <a href="#" class="link link-top">Travel Packages</a>
            <ul class="nav nav-sub">
              <li>
                <a href="#" class="link link-sub">Apollo Sights</a>
              </li>
              <li>
                <a href="#" class="link link-sub">Great Craters</a>
              </li>
              <li>
<a href="#" class="link link-sub">Mare the Merrier</a>
              </li>
            </ul>
          </li>
          <li class="item-top">
            <a href="#" class="link link-top">Accommodations</a>
            <ul class="nav nav-sub">
              <li>
                <a href="#" class="link link-sub">The Armstrong Hotel</a>
              </li>
              <li>
                <a href="#" class="link link-sub">Lunar Lander Lodge</a>
              </li>
              <li>
                <a href="#" class="link link-sub">Tranquility Inn</a>
              </li>
            </ul>
          </li>
          <li class="item-top">
            <a href="#" class="link link-top">Plan Your Trip</a>
            <ul class="nav nav-sub">
              <li>
                <a href="#" class="link link-sub">Seasonal Rates</a>
              </li>
              <li>
                <a href="#" class="link link-sub">Food and Restaurants</a>
              </li>
              <li>
                <a href="#" class="link link-sub">Gravity Acclimation</a>
              </li>
              <li>
                <a href="#" class="link link-sub">Recommended Duration</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </header>

    <main>
      ...
    </main>
  </body>
</html>

列表元素包含您将用于创建样式的几个类。将这些添加保存到 index.html。

接下来，在文本编辑器中打开 styles.css。此站点标题和导航将使用 CSS Flexbox 的几个实例来为默认垂直堆叠的元素创建并排布局。将以下代码块中突出显示的 CSS 添加到 styles.css 文件的底部：

样式.css

...
header {
  font: 1.125rem / 1.25 MuseoModerno, sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  color: white;
  background: linear-gradient(250deg, hsl(300, 40%, 10%), hsl(300, 40%, 20%));
}

h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 400;
}

.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-main {
  display: flex;
  align-items: stretch;
}

.item-top {
  position: relative
}

这个 header 选择器定义了 <header> 元素中所有文本的字体值。然后 display、align-items 和 justify-content 属性用 flex 布置标题，因此内容位于水平行中，彼此居中。它们还使 <h1> 和 <nav> 元素占据容器的相对两端。 h1 选择器定义站点标题样式，.nav 类选择器删除默认的无序列表样式。 .nav-main 类将顶级导航项放在自己的 flex 行中。最后，.item-top 类选择器将顶级 <li> 定义为 position: relative 上下文。

继续你的 styles.css 文件，下一组样式将隐藏子导航并创建链接样式：

样式.css

...
.nav-sub {
  display: none;
}

.link {
  color: inherit;
  display: block;
  text-decoration: none;
}

.link-top {
  padding: 1.25rem 1.5rem;
}

.link-sub {
  padding: 0.75rem 1.5rem;
}

.item-top:hover .link-top,
.item-top:focus .link-top,
.item-top:focus-within .link-top {
  background-color: black;
}

.link-sub:hover,
.link-sub:focus {
  background-color: hsl(210, 40%, 20%);
}

这些规则的第一个任务是使用 display: none 属性和值隐藏下拉子导航，因为下拉部分需要隐藏直到悬停。然后创建一系列类选择器来应用可见顶级链接和隐藏嵌套链接的样式。 .link 类从导航中的所有链接中删除默认的 <a> 样式。然后，.link-top 和 .link-sub 规则定义了两个级别的每个链接所需的 padding。

接下来，包含 .item-top:hover .link-top 的分组组合子在其父 <li> 元素悬停、具有焦点或具有焦点的后代元素时为链接提供背景颜色。状态位于 <li> 而不是 <a> 上，因为在光标或焦点移动到子导航项后，交互状态样式仍保留在 <a> 上。最后，.link-sub:hover, .link-sub:focus 定义了悬停或聚焦时子导航链接的 background-color 变化。

将更改保存到 styles.css，然后在浏览器中打开 index.html。该页面现在将有一个穿过页面顶部的深紫色条，左侧是一个大网站标题，右侧是一系列导航项，如下图所示：

接下来，在文本编辑器中返回 styles.css 以创建子导航下拉效果的样式：

样式.css

...
.link-sub:hover,
.link-sub:focus {
  background-color: hsl(210, 40%, 20%);
}

.item-top:hover .nav-sub,
.item-top:focus .nav-sub,
.item-top:focus-within .nav-sub {
  display: block;
  position: absolute;
}

在此代码中，您将一个组组合器选择器 .item-top:hover .nav-sub 附加到您的 CSS，以及 :focus 和 :focus-with 代替 :hover 的状态变化。当 <li> 元素悬停或具有焦点时，嵌套的 <ul> 应将 display 属性从 none 更改为 block 以使其可见的。此外，当焦点从顶层移动时，子导航不应该消失，这是 :focus-within 帮助的地方。接下来，您将 position 属性设置为 absolute，因为这需要更精确的定位控制。

接下来，由于期望的结果是让下拉菜单始终从 <header> 元素的最底部开始，因此需要将 top 属性设置为 100%，在除了一些规则：

样式.css

...

.item-top:hover .nav-sub,
.item-top:focus .nav-sub,
.item-top:focus-within .nav-sub {
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  width: 15rem;
  background-color: black;
}

将 top 属性设置为 100% 将移动 absolute 元素，使其顶部从 relative 祖先的底部开始。然后，由于顶级导航将一直向右，因此需要将 right 属性设置为 0 以便下拉菜单的宽度不会破坏离开屏幕页面。最后，您添加了一个设置为 15rem 的 width 值和一个设置为 black 的 background-color。

将这些更改保存到 styles.css，然后返回浏览器并刷新 index.html。您现在可以通过将光标悬停在顶级元素上，然后将光标垂直移动到子导航项来与导航交互。此外，如果您使用键盘上的 TAB 键，您将能够循环浏览每个顶级和子级导航项。以下动画显示了在使用键盘导航来关注每个导航项时这将如何显示：

在本节中，您使用 absolute 定位值和两个方向属性的强大功能创建了一个下拉子导航系统。您还使用 top 属性上的 100% 值来推动子导航始终显示在标题栏下方。在下一节中，您将使用 position 属性的 fixed 值来使标题栏在滚动时保持固定在页面顶部。

使用 `fixed` 值

position 属性的另一个常见用途是实现 fixed 值以使元素保持在视口内，无论滚动位置如何。此值通常在创建诸如警报横幅之类的功能时使用，无论用户在页面上的哪个位置都需要可见。在本节中，您将使用 fixed 值将标题始终保留在视口中。这将在整个用户体验中提供对导航的更快访问。

要开始使用 fixed 定位值，请在文本编辑器中返回 styles.css。转到 header 元素选择器，在选择器块的顶部，添加具有 fixed 值的 position 属性。由于目标是将页眉附加到页面顶部，因此将 top 属性设置为 0，如以下代码块中突出显示的：

样式.css

...
header {
  position: fixed;
  top: 0;
  font: 1.125rem / 1.25 MuseoModerno, sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  color: white;
  background: linear-gradient(250deg, hsl(300, 40%, 10%), hsl(300, 40%, 20%));
}
...

将这些添加保存到 stlyes.css，然后在 Web 浏览器中打开 index.html。当页面完成渲染时，开始上下滚动页面以显示标题如何保持固定在视口窗口的顶部。以下动画演示了此效果在浏览器中的显示方式：

现在标题有一个问题，它添加了 position: fixed：它不再跨越窗口的整个宽度。使用 fixed 值的副作用之一是它会导致元素尽可能地压缩。有两种解决方案，其中之一是将 width 属性设置为 100%。但是，如果元素具有 padding 和默认框模型，这可能会导致水平滚动。

相反，添加一个 left 和 right 属性，每个属性都设置为 0：

样式.css

...
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  font: 1.125rem / 1.25 MuseoModerno, sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  color: white;
  background: linear-gradient(250deg, hsl(300, 40%, 10%), hsl(300, 40%, 20%));
}
...

这将拉伸标题以固定到视口的左右边缘。

将更改保存到 styles.css，然后在浏览器中刷新 index.html。标题将再次跨越边缘，并在向下滚动页面时保持可见。无论用户向下滚动页面多远，下拉导航都会继续工作，如下面的动画所示：

您现在已经有效地创建了一个固定的标题，无论用户在页面的哪个位置，都可以访问导航。您还了解到 position: fixed 需要额外的样式才能伸展到浏览器的每一侧。在最后一节中，您将使用 z-index 属性来控制 position 元素如何相互重叠。

使用 `z-index` 分层元素

使用 position 属性最困难的部分是在页面上有多个 position 元素并管理它们应该重叠的顺序。默认情况下，浏览器通过将它遇到的每个 position 元素放在 HTML 页面的下方，放在它之前的元素之前，从而对这些元素进行分层。在本节中，您将使用 z-index 属性来更改此默认分层。您还将使用自定义 CSS 变量来跟踪图层顺序。

当使用 position: fixed 标题向下滚动页面时，一旦向下滚动到月球照片和标题相遇的足够远，就会出现一个大问题。期望 fixed 标头将与 relative 照片重叠，但实际行为是相反的：

照片与标题重叠的原因是由于 HTML 顺序。 relative、absolute 或 fixed 值的每个 position 元素设置为沿 z 轴在彼此前面相加的一系列平面. 可以通过将导航移动到页面底部来解决此问题，因为 position: fixed 会在视觉上将标题保持在顶部。但是，存在 z-index 属性来控制这种情况。 z-index 值是一个整数值，它定义了元素将占据的 z 轴堆栈中的顺序。

所有设置为 relative、absolute 和 fixed 的元素的默认 z-index 值为 0，但当有超过沿同一平面的一个元素，堆栈根据标记顺序呈现。使用小的 z-index 值，例如照片的 z-index: 1 和标题的 z-index: 2 将解决此问题，但由于 z-index 值必须是整数, 两者之间就没有其他元素可以容纳的空间。增加样式灵活性的一种方法是使用基于 100 的系统通过 CSS 变量增加 z-index 值。

要创建您自己的 z-index 系统，请在文本编辑器中打开 styles.css。然后，在文件的顶部创建一个 :root 选择器，这是一个伪类选择器，它将样式应用于页面上最顶部的 HTML 元素，最常见的是 <html> 元素。在里面，创建一系列 CSS 自定义属性，也称为 CSS 变量：

样式.css

:root {
  --z-1: 100;
  --z-2: 200;
  --z-3: 300;
  --z-4: 400;
  --z-5: 500;
  --z-6: 600;
  --z-7: 700;
  --z-8: 800;
  --z-9: 900;
}
...

如此代码所示，自定义属性以两个连字符开头，后跟自定义名称。对于 z-index 系统，您创建了一个以 z 开头的系列，后跟另一个连字符，然后是 1 到 9 之间的数字。对于每个自定义属性的值，您将其设置为相应范围的一百个值：100 表示 1，200 表示 2，依此类推。这种以 100 为基础的增量的目的是在系统的每个级别之间允许大量可能的空间。如果存在 position 元素需要在 --z-3 和 --z-4 之间移动的情况，那么有 99 个可能的值来适应这种情况。

接下来，转到 styles.css 文件中的 figure 元素选择器。要使用自定义属性的值，首先添加一个 z-index 属性。然后，为了实现系统，添加一个 var() 作为 z-index 属性的值：

样式.css

...
figure {
  margin: 2rem 0;
  padding: 0;
  position: relative;
  z-index: var(--z-1);
}
...

CSS 中的 var() 声明该值将由自定义属性定义。在 var() 的括号内，您添加了 :root 规则集中的第一个属性：--z-1。这定义了 z-index 系统的底层并且还没有改变视觉顺序。

接下来，转到 header 选择器并添加一个具有相同格式的 z-index 属性以加载 --z-9 自定义属性值。

样式.css

...
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-9);
  font: 1.125rem / 1.25 MuseoModerno, sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  color: white;
  background: linear-gradient(250deg, hsl(300, 40%, 10%), hsl(300, 40%, 20%));
}
...

由于 --z-9 是系统中的最高数字，因此 <header> 元素将始终高于所有其他 position 元素。需要注意的一点是 z-index 值仅放置在五个 position 元素中的三个上。这是因为每个 position 上下文只需要一个 z-index。 figure 和 header 是页面上最顶部的 position 元素，正文是初始的 position 上下文。其余嵌套的 position 元素将与它们的祖先一起移动到相应的 z 轴平面。

将更改保存到 styles.css，然后返回浏览器重新加载 index.html。现在，当您滚动页面时，月球照片及其标题现在在标题及其打开的子导航项下移动。以下动画演示了新的重叠场景：

在最后一节中，您使用自定义属性创建了一个 z-index 系统，以更好地控制哪些 position 元素与哪些重叠。您还使用 CSS 变量方法通过将 z-index 值增加 100 来容纳具有大量 position 元素的项目。

结论

position 属性提供了多种方法来创建独特的布局和交互。在本教程中，您将练习 relative、absolute 和 fixed 的 position 属性值。您通过示例了解了每个示例如何以不同方式与页面以及彼此交互。您还使用了方向属性 top、right、bottom 和 left 来微调 position 元素在页面和相互关联。最后，您使用 z-index 属性来控制 position 元素的分层顺序。这些工具在您的前端开发实践中非常有价值，可以解决多种其他解决方案，包括模式、警报横幅和粘性元素。

如果您想阅读更多 CSS 教程，请尝试如何使用 CSS 设置 HTML 样式系列中的其他教程。

如何在CSS中使用位置和Z-Index创建布局特征

介绍

先决条件

设置示例网页和初始 position 值

放置具有方向属性的元素

使用 relative 和 absolute 关系

使用absolute定位制作下拉导航栏

使用 fixed 值

使用 z-index 分层元素

结论

设置示例网页和初始 `position` 值

使用 `relative` 和 `absolute` 关系

使用`absolute`定位制作下拉导航栏

使用 `fixed` 值

使用 `z-index` 分层元素