作者选择了 Diversity in Tech Fund以作为 Write for Donations计划的一部分接受捐款。
介绍
一个网站的用户界面(UI)的元素可以以多种不同的方式相互交互并覆盖到上方,使得CSS的布局难以控制. 确定某一要素的位置以及它如何将其他要素相上下的一个方法是将位置 ' 财产、z-index ' 财产和-方向属性 -- -- 结合起来,这些属性采用 " 上 " 、 " 右 " 、 " 从下 " 和 " 左 " 的间隔值。 这些 CSS 属性的经验将使您能够快速高效地创建下拉导航条等UI 元素和图形标题.
在此教程中, 您将在标题中创建含有导航元素的内容页面 。 导航元素会包含一个下放子导航组件,当页面被滚动时,头部本身会被固定在页面上方. 你们将利用位置 ' 财产及其价值相对 ' 、绝对 ' 和固定 ' 与某些方向属性一起产生这种效果。 然后与`z-index'财产合作,用该财产管理元素分层.
前提条件
- 关于类型选择器、组合器选择器和选择器组的知识, 您可以在 [如何选择 HTML 元素到 CSS] (https://andsky.com/tech/tutorials/how-to-select-html-elements-to-style-with-css) 中找到。
- CSS盒模型的经验,可以在CSS中的如何与盒模型一起工作教程中找到.
- 了解 HTML `表' 元素及其视觉属性, 您可以在 [How To Style a Table with CSS] (https://andsky.com/tech/tutorials/how-to-style-a-table-with-css ) 教程中了解这些属性。
- 联合国 保存在本地机上的空 HTML 文件为) 教程, 并遵循 [如何使用和理解 HTML 元素] ([ LINK4] ), 以查看浏览器中的 HTML 。 如果您是新到 HTML , 请尝试整个 [如何在 HTML (https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html) 中构建一个网站 。 .
设置示例网页和初始位置值
所有HTML元素的默认位置值为静态,构成内容的正常流量。静态状态不能受到z-index属性或任何方向属性的影响。为了在您的网页布局中引入更多的灵活性,您将稍后更改位置的值,而不是此默认值。
首先,在文本编辑器中打开 index.html 文件,然后将以下 HTML 添加到文件中:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 <meta charset="utf-8" />
6 <title>Destination: Moon</title>
7 <link rel="preconnect" href="https://fonts.googleapis.com">
8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9 <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700&display=swap" rel="stylesheet">
10 <link href="styles.css" rel="stylesheet" />
11 </head>
12 <body>
13 </body>
14</html>
在此 HTML 片断中, QQmeta>元素定义了用于文本的字符集 。 这将使得大多数特殊的字符,如口音标记,不使用特殊的HTML代码来渲染. QQtitleQQ元素为浏览器提供了页面标题. 在 [定制字体] (https://andsky.com/tech/tutorials/how-to-load-and-use-custom-fonts-with-css) 中前三个 QQlink 元素加载 Museo Moderno from [Google Fonts] (https://fonts.google.com]], 最后加载您将添加到您的 styles.cs' 文件的样式 .
接下来,用内容填写页面,这样你就可以有风格。 您将使用来自 Sagan Ipsum的样本内容作为填写副本来使用风格。 在文本编辑器中返回 index.html,并从以下代码块中添加突出的 HTML:
1[label index.html]
2<html>
3 <head>
4 ...
5 </head>
6 <body>
7 <main>
8 <h2>Schedule Your Trip</h2>
9 <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>
10
11 <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>
12
13 <figure>
14 <img src="images/moon.jpg" alt="The Moon during twilight" />
15 <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>
16 </figure>
17
18 <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>
19
20 <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>
21 </main>
22 </body>
23</html>
您刚刚添加到 index.html 的代码会创建一个标题和四个段落,这些段落位于一个 < main> 元素中。 在第二段落之后,一个 < 图像> 元素被创建,以便在第二段落之后加载一个 ` moon.jpg 图像。
要查看此处链接的图像,您需要 Moon Image。 首先,在同一个文件夹中创建一个 images 目录,作为您的 index.html 文件:
1mkdir images
使用您的浏览器将此文件下载到您新创建的图像目录,或使用以下弯曲命令通过命令行下载:
1curl -sL https://assets.digitalocean.com/articles/68084/moon.jpg -o images/moon.jpg
现在你有你的图像,打开你的网页浏览器. 选择 文件 菜单项,然后选择 ** 打开** 选项,将你的 index.html 文件加载到浏览器中。
接下来,您将开始编写您的风格。 返回文本编辑器并打开styles.css。 以下代码块包含体、主、形、img和h2元素的开始风格:
1[label styles.css]
2body {
3 margin: 0;
4 font: 1rem / 1.5 sans-serif;
5}
6
7main {
8 margin: 6rem auto;
9 width: 95%;
10 max-width: 75ch;
11 font-size: 1.125rem;
12}
13
14figure {
15 margin: 2rem 0;
16 padding: 0;
17}
18
19img {
20 max-width: 100%;
21 display: block;
22}
23
24h2 {
25 font: 400 1.875rem/1.25 MuseoModerno, sans-serif;
26 color: hsl(300, 40%, 30%);
27}
将您的添加内容保存到 styles.css,然后返回您的浏览器并更新 index.html. 这些风格现在将聚集在一起,默认字体大小设置,内容区域以页面为中心,图像占有适当的空间。
在文本编辑器中返回styles.css,然后从下面的代码块中添加突出的 CSS,以定义月球图像的标题:
1[label styles.css]
2...
3figcaption {
4 display: inline-block;
5 color: white;
6 background-color: hsl(210, 40%, 10%);
7 padding: 0.25rem 1rem;
8}
9
10figcaption a {
11 color: inherit;
12}
figcaption元素选择器将图像设置为线性块,以使其只有其内容的宽度。figcaption上的风格也将背景设置为黑色紫色,带有白色文本,周围有点涂层,然后figcaption a后代选择器将颜色值设置为继承,以便使用其父母的白色而不是默认的蓝色。
在浏览器中保存styles.css并更新index.html。<figcaption>元素现在将显示为一个黑暗的背景块,包含一些白色文本,如下图所示:
接下来,要开始使用位置属性,在文本编辑器中返回styles.css。在figcaption元素选择块中,添加位置属性,然后使用相对值,如下列代码块所示:
1[label styles.css]
2...
3figcaption {
4 position: relative;
5 display: inline-block;
6 color: white;
7 background-color: hsl(210, 40%, 10%);
8 padding: 0.25rem 1rem;
9}
10...
位置属性的相对值在内容流中与静态相同,但与静态默认值不同,相对值可以使用方向属性和z-index属性来切换位置和层次选项。
将此更改保存到您的styles.css并返回浏览器以更新index.html。
在本节中,您为项目设置了初始的 HTML 和 CSS. 您还写了第一个位置属性,将字体值设置为相对。
将元素与方向属性放置
有四个方向属性:上'、下'、右'和左'。 这些属性只与位置设定为静态以外任何有效值的要素相配合。 这四个属性都接受任何单位的正或负数值,包括百分比。 它们还接受auto'的关键字值,可用于将这些属性放回默认值。 在此步骤中,您将使用这些属性将图形`元素移动到这四个方向中的一个.
要开始使用方向属性,请在文本编辑器中打开styles.css。 返回figcaption元素选择器并在位置属性和值之后添加一个顶部属性:
1[label styles.css]
2...
3figcaption {
4 position: relative;
5 top: -4rem;
6 display: inline-block;
7 color: white;
8 background-color: hsl(210, 40%, 10%);
9 padding: 0.25rem 1rem;
10}
11...
在此代码中,您将顶部的值设置为4rem。在顶部属性的正值会将元素从顶部推下来,但负值会将元素从其初始放置的顶部边缘拉上。
將您的變更儲存為「styles.css」,然後在您的網頁瀏覽器中開啟「index.html」。
该元素沿着左侧,因为这个浏览器的默认语言设置为从左到右方向. 如果浏览器或页面被设置为从右到左语言,则位置元素将位于图像的右侧。
当设置方向属性值为0,预期和预期结果是元素沿着该侧无间隔,但相对值只会这样做,如果它不干扰页面的内容的正常流程。
要在实践中看到此限制,请删除顶部属性,并添加以下右和底部属性:
1[label styles.css]
2...
3figcaption {
4 position: relative;
5 right: 0;
6 bottom: 1rem;
7 display: inline-block;
8 color: white;
9 background-color: hsl(210, 40%, 10%);
10 padding: 0.25rem 1rem;
11}
12...
在本片中,您将正确属性设置为0。接下来,您添加了一个底部属性,其值为1rem。 将您的更改保存到styles.css,然后在浏览器中更新index.html。 预期的行为是<figcaption>元素位于右侧,在照片底部略高一些。 然而,如下图像所示,元素仍然位于左侧,几乎不在照片上面:
在本节中,您使用了四个方向属性中的三种来将<figcaption>元素移动到照片上,方向属性只能用于使用位置元素的关键字值,而不是静态,方向属性是有限的,所有内容都可以与相对值对齐。
使用相对和绝对的关系
静态和相对的位置值在它们如何与页面上的内容流互动方面相似,您可以使用与相对值的方向属性在页面布局中移动一个元素,但这种运动不会扰乱内容流。
在文本编辑器中打开styles.css,然后进入figcaption元素选择器,然后将位置属性值从相对更改为绝对,如下文所示:
1[label styles.css]
2...
3figcaption {
4 position: absolute;
5 right: 0;
6 bottom: 1rem;
7 display: inline-block;
8 color: white;
9 background-color: hsl(210, 40%, 10%);
10 padding: 0.25rem 1rem;
11}
12...
将此属性值保存为styles.css。接下来,返回浏览器以更新index.html。该元素现在位于整个页面的右侧,在滚到页面顶部时与窗口的底部保持一致。
当将相对 ' 值改为绝对 ' 值时,`绝对 ' 要素需要一个背景,从中应用方向属性值。 上下文由具有 " 位置 " 价值的祖先要素所定义。 当浏览器找不到具有 " 位置 " 值的祖先时,上下文就变成了浏览器的窗口。 在这种情况下, " 从下 " 值将 " 1雷姆 " 元素从浏览器窗口下方上移。 然后, " 右 " 地产将元素设置在窗口右侧.
为了使<figcaption>覆盖照片并与照片最右边的边缘对齐,背景需要改变。你可以通过将位置属性应用到最接近的祖先元素设置为相对的值来做到这一点。
要开始为<figcaption>元素设置新背景,请在文本编辑器中返回styles.css。接下来,转到figure元素选择器,因为<figcaption>元素是<figcaption>的最接近祖先。
1[label styles.css]
2...
3figure {
4 margin: 2rem 0;
5 padding: 0;
6 position: relative;
7}
8...
将此更新保存为styles.css,然后在 Web 浏览器中更新为index.html。<figcaption>从页面的右下角移动到照片的右下角。
您现在已经通过使用相对和绝对的组合来控制一个绝对定位元素的位置,以精确调整预期元素的位置。
创建一个绝对定位的降级导航栏
位置属性的更常见用途之一是下落导航系统. 在本节中,您将写入HTML,然后创建一个网站标题的风格,其中有一个下落导航,该导航被激活的浮动交互。
要开始创建下载导航,请在文本编辑器中打开index.html。然后在<body>标签中的<main>元素之前创建一个<header>元素。
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 ...
6 </head>
7 <body>
8 <header>
9 <h1>Destination: <strong>Moon</strong></h1>
10 <nav>
11 <ul class="nav nav-main">
12 <li class="item-top">
13 <a href="#" class="link link-top">Base Station</a>
14 </li>
15 <li class="item-top">
16 <a href="#" class="link link-top">Travel Packages</a>
17 <ul class="nav nav-sub">
18 <li>
19 <a href="#" class="link link-sub">Apollo Sights</a>
20 </li>
21 <li>
22 <a href="#" class="link link-sub">Great Craters</a>
23 </li>
24 <li>
25<a href="#" class="link link-sub">Mare the Merrier</a>
26 </li>
27 </ul>
28 </li>
29 <li class="item-top">
30 <a href="#" class="link link-top">Accommodations</a>
31 <ul class="nav nav-sub">
32 <li>
33 <a href="#" class="link link-sub">The Armstrong Hotel</a>
34 </li>
35 <li>
36 <a href="#" class="link link-sub">Lunar Lander Lodge</a>
37 </li>
38 <li>
39 <a href="#" class="link link-sub">Tranquility Inn</a>
40 </li>
41 </ul>
42 </li>
43 <li class="item-top">
44 <a href="#" class="link link-top">Plan Your Trip</a>
45 <ul class="nav nav-sub">
46 <li>
47 <a href="#" class="link link-sub">Seasonal Rates</a>
48 </li>
49 <li>
50 <a href="#" class="link link-sub">Food and Restaurants</a>
51 </li>
52 <li>
53 <a href="#" class="link link-sub">Gravity Acclimation</a>
54 </li>
55 <li>
56 <a href="#" class="link link-sub">Recommended Duration</a>
57 </li>
58 </ul>
59 </li>
60 </ul>
61 </nav>
62 </header>
63
64 <main>
65 ...
66 </main>
67 </body>
68</html>
列表元素包含您将使用的几个类来创建样式. 将这些添加到 index.html。
接下来,在文本编辑器中打开 styles.css. 这个网站标题和导航将使用 [CSS Flexbox] 的几个实例(https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)来创建垂直堆叠的元素的侧面布局默认。 从以下代码块中添加突出的 CSS 到您的 `styles.css' 文件的底部:
1[label styles.css]
2...
3header {
4 font: 1.125rem / 1.25 MuseoModerno, sans-serif;
5 display: flex;
6 align-items: center;
7 justify-content: space-between;
8 padding: 0 2rem;
9 color: white;
10 background: linear-gradient(250deg, hsl(300, 40%, 10%), hsl(300, 40%, 20%));
11}
12
13h1 {
14 margin: 0;
15 font-size: 1.75rem;
16 font-weight: 400;
17}
18
19.nav {
20 margin: 0;
21 padding: 0;
22 list-style: none;
23}
24
25.nav-main {
26 display: flex;
27 align-items: stretch;
28}
29
30.item-top {
31 position: relative
32}
此 header 选择器定义了 QQheader 元素中所有文本的字体值 。 然后, " 披露 " 、 " 对应项目 " 和 " 说明理由-内容 " 属性用 " flex " 标出标题,因此,内容放在一行中,彼此为中心。 他们也让"<"和"<"元素占据了容器的对立端. h1'选择器定义了站点标题样式,而.nav'类选择器删除了默认的无顺序列表样式。 .nav-main'级将顶级导航物品放入自己的弹性'一行。 最后,.time-top'类选择者将上层的``<-li-'定义为位置:相对'上下文.
继续在styles.css文件中,下一组风格将隐藏子导航并创建链接风格:
1[label styles.css]
2...
3.nav-sub {
4 display: none;
5}
6
7.link {
8 color: inherit;
9 display: block;
10 text-decoration: none;
11}
12
13.link-top {
14 padding: 1.25rem 1.5rem;
15}
16
17.link-sub {
18 padding: 0.75rem 1.5rem;
19}
20
21.item-top:hover .link-top,
22.item-top:focus .link-top,
23.item-top:focus-within .link-top {
24 background-color: black;
25}
26
27.link-sub:hover,
28.link-sub:focus {
29 background-color: hsl(210, 40%, 20%);
30}
这些规则的第一个任务是通过使用显示:没有属性和值来隐藏下载子导航,因为下载部分需要被隐藏,直到浮动。然后,您创建一系列类选择器来应用可见的顶层链接和隐藏的嵌入链接的样式。
接下来,包括.ite-top:hover.link-top'的分组组合符提供了当母的QQli>元素被徘徊,有焦点,或有被聚焦的后人时链接的背景颜色. 各州在QQLiQQ上,而不是QQaAQ上,因为在光标或焦点移动到子导航项目后,交互状态的样式仍然在QQaAQ上. 最后,.link-sub:hover,.link-sub:focus'定义了在徘徊或聚焦时子导航链接的背景-颜色'变化.
将您的更改保存到styles.css,然后在您的浏览器中打开index.html。页面现在将有一个黑色紫色栏,横跨页面顶部,左侧有一个大网站标题,右侧是一个导航项目序列,如下图像所示:
接下来,回到文本编辑器中的styles.css以创建子导航下载效果的样式:
1[label styles.css]
2...
3.link-sub:hover,
4.link-sub:focus {
5 background-color: hsl(210, 40%, 20%);
6}
7
8.item-top:hover .nav-sub,
9.item-top:focus .nav-sub,
10.item-top:focus-within .nav-sub {
11 display: block;
12 position: absolute;
13}
在此编码中,您将把组合组合选取器.ite-top:hover.nav-sub'附加到您的CSS中,同时附上:焦点和:焦点-用:hover'代替:hover'的状态变化。 当QQLiQQ元素被徘徊或被聚焦时,被窝点的QQulQQ应当将"Display"属性从"none"改为"block",使其能被看到. 此外,当焦点从顶层移出时,子导航不应消失,而上层正是:焦点-内部'有所帮助的地方。 其次,你将位置 ' 财产添入`绝对 ' ,因为这需要更精确的定位控制.
接下来,由于所需的结果是始终在<header>元素的最底部开始下降,因此需要添加一个设置为100%的顶部属性,除其他几个规则外:
1[label styles.css]
2...
3
4.item-top:hover .nav-sub,
5.item-top:focus .nav-sub,
6.item-top:focus-within .nav-sub {
7 display: block;
8 position: absolute;
9 top: 100%;
10 right: 0;
11 width: 15rem;
12 background-color: black;
13}
设置为100%的顶部属性将移动绝对元素,以便其顶部从相对祖先的底部开始。 然后,由于顶部导航将向右移动,需要设置为0的正确属性,以便下落的宽度不会破坏页面的水平宽度。
将这些更改保存到 systems.cs , 然后返回浏览器并刷新 `index.html' 。 您现在可以通过在顶级元素上盘旋来与导航交互,然后将光标垂直地移动到子导航项上. 此外,如果在键盘上使用 " TAB " 键,就可以循环通过每个顶级和下级导航项目。 以下的动画显示了在使用键盘导航来聚焦每个导航项目时将如何出现:
在本节中,您使用绝对定位值和两个方向属性的功率创建了一个下行子导航系统,您还使用顶部属性的100%值来推动子导航始终显示在标题栏下方。
使用固定值
位置属性的另一个常见用途是实施固定值,使元素保持在视图端口中,无论滚动位置如何。 此值通常用于创建警告标签等功能,这些功能需要在页面上无论用户在何处可见。
要开始使用固定定位值,请在文本编辑器中返回styles.css。 进入标题元素选择器,并在选择器块的顶部添加固定值的位置属性。
1[label styles.css]
2...
3header {
4 position: fixed;
5 top: 0;
6 font: 1.125rem / 1.25 MuseoModerno, sans-serif;
7 display: flex;
8 align-items: center;
9 justify-content: space-between;
10 padding: 0 2rem;
11 color: white;
12 background: linear-gradient(250deg, hsl(300, 40%, 10%), hsl(300, 40%, 20%));
13}
14...
将这些添加到stlyes.css,然后在您的 Web 浏览器中打开index.html。当页面完成渲染时,开始滚动页面上下,以显示标题如何固定在 viewport 窗口的顶部。
现在头部存在一个问题,它添加了位置:固定的:它不再覆盖窗口的整个宽度。使用固定的值的副作用之一是,它会导致元素尽可能地凝结下来。
相反,添加一个左和右属性,每个属性为0:
1[label styles.css]
2...
3header {
4 position: fixed;
5 top: 0;
6 left: 0;
7 right: 0;
8 font: 1.125rem / 1.25 MuseoModerno, sans-serif;
9 display: flex;
10 align-items: center;
11 justify-content: space-between;
12 padding: 0 2rem;
13 color: white;
14 background: linear-gradient(250deg, hsl(300, 40%, 10%), hsl(300, 40%, 20%));
15}
16...
这将延伸标题将被固定到视图端的左边和右边。
将您的更改保存到styles.css,然后在浏览器中更新index.html。标题将再次跨越边缘到边缘,并在滚动页面时保持可见。
您现在已经有效地创建了一个固定的标题,允许导航可访问,无论用户在哪个页面上。您还了解到位置:固定的需要额外的风格来扩展到浏览器的每个侧面。
带有z-index的分层元素
使用位置属性最难的是在页面上有多个位置元素,并管理它们应重叠的顺序。默认情况下,浏览器将这些元素叠加,将它遇到的每个位置元素进一步放置在HTML页面上,而不是之前出现的元素。
当将页面滚动到位置:固定的标题时,有一个大问题发生在你滚动到足够远的地方,以便月球照片和标题相遇时。
照片之所以重叠,是因为HTML命令. 相对'、绝对'或固定'值的每个位置 ' 要素被设定为沿z轴相接而相接而相接的一架飞机系列。 由于位置:固定',可以通过将导航移到页底来解决这个问题。 把信头放在顶端 然而,z-index'财产的存在是为了控制这种情况。 `z-index'值是一个整数值,它定义了元素所占据的z轴堆栈的顺序.
设定为相对'、绝对'和固定'的所有要素都得到0'的默认z-index'值,但如果同一平面上存在不止一个要素,则堆栈根据加价顺序制作。 使用"z-index"等小的"z-index"值: 1'用于照片和z-index: 标题2将解决这个问题,但由于z-index ' 值必须是一个整数,因此没有其他因素在两者之间相适应的余地。 给您的造型增加灵活性的一种方法是使用基于100的系统,使用CSS变量来递增"z-index"值.
要创建自己的z-index系统,请在文本编辑器中打开styles.css。然后,在文件的顶部创建一个:root选择器,这是一种假类类选择器,将风格应用到页面上最顶部的HTML元素,最常见的是<html>元素。
1[label styles.css]
2:root {
3 --z-1: 100;
4 --z-2: 200;
5 --z-3: 300;
6 --z-4: 400;
7 --z-5: 500;
8 --z-6: 600;
9 --z-7: 700;
10 --z-8: 800;
11 --z-9: 900;
12}
13...
如此代码所示,自定义属性从两个连字符符号开始,再取自自定义名称. 对于"z-index"系统,你创建了一个以"z"开头的系列,然后是另一个连字符,然后数字从1到9不等. 对于每个自定义属性的值,您将其设定为相应的范围的100个值:100对1,200对2等. 这种以100为基数的递增,目的是在系统每个级别之间留出大量可能的空间. 如果在-z-3'和-z-4'之间出现`位置 ' 因素,则有99个可能的价值来适应这种情况.
接下来,转到你的)作为z-index`属性的值:
1[label styles.css]
2...
3figure {
4 margin: 2rem 0;
5 padding: 0;
6 position: relative;
7 z-index: var(--z-1);
8}
9...
)的中,您添加了从:root规则集中的第一个属性:--z-1`。
接下来,进入标题选择器,并添加具有相同格式的z-index属性,以加载--z-9自定义属性值。
1[label styles.css]
2...
3header {
4 position: fixed;
5 top: 0;
6 left: 0;
7 right: 0;
8 z-index: var(--z-9);
9 font: 1.125rem / 1.25 MuseoModerno, sans-serif;
10 display: flex;
11 align-items: center;
12 justify-content: space-between;
13 padding: 0 2rem;
14 color: white;
15 background: linear-gradient(250deg, hsl(300, 40%, 10%), hsl(300, 40%, 20%));
16}
17...
由于-z-9'是系统中最高的数字,所以Q-header'元素将永远高于所有其他位置'元素。 需要注意的一件事是,z-index ' 值只放在五个`位置 ' 要素中的三个。 这是因为 " z-index " 只在 " 位置 " 上下文中才需要。 " 图 " 和 " 头 " 是页上最高的 " 位置 " 要素,其正文是 " 位置 " 的起首语。 剩余的嵌入式 " 位置 " 元素将随其祖先前往适当的z轴平面.
将您的更改保存到styles.css,然后返回您的浏览器以重新加载index.html。现在,当您滚动页面时,月球的照片及其标题现在在标题和其开放的子导航项目下移动。
在本节中,您使用了自定义属性来创建一个z-index系统,以更好地控制哪个position元素重叠哪个。
结论
位置 ' 财产提供了创建独特布局和互动的若干途径。 在这个教程中,你将相对 ' 、绝对 ' 和固定 ' 的位置'财产价值付诸实践。 你用各种例子来证明 每个人是如何以不同的方式与网页互动的。 你们还利用上'、右'、下'和左'等取向,调整了位置 ' 要素在页上的位置和彼此的关系。 最后,你使用了z-index'属性来控制位置 ' 元素的分层顺序。 这些工具在您前端的开发实践中将很有价值,可以解决许多其他类型的解决方案,包括模式,警示旗和粘性元素.
如果你想阅读更多的CSS教程,请尝试其他教程在(https://www.digitalocean.com/community/tutorial_series/how-to-style-html-with-css)。