后端开发教程 - Java、Spring Boot 实战 - msg200.com
揭秘 Position 属性
CSS 提供了一个position属性，用于指定元素在文档中的显示方式。当你想将元素定位到 DOM 中的常规流之外时，此属性非常有用。
这篇博文是关于什么的？
这篇博客文章介绍了position具有top、right、bottom、left和z-index属性的属性，这些属性决定了元素的最终位置。
由于这个属性很容易被误解，让我们一起尝试弄清楚这个属性吧！
请查看我在这篇文章中解释的演示
博客的先决条件
这篇博文假设您熟悉 HMTL 和 CSS 的语法和基础知识。
CSS 位置属性是什么？
- 该
position属性指定元素在 DOM 中的位置。 - 除此之外，您还可以使用
top、、和属性来指定元素的放置right位置。bottomleft
-
该
position属性可以采用五个值：- 静止的
- 绝对
- 相对的
- 固定的
- 黏
-
在我们开始之前，让我们先简单了解一下、、、
top和是什么right。bottomleftz-index
top、right、bottom和属性指定元素left应定位在距离顶部/右侧/底部/左侧多远的位置。- 默认情况下，所有这些属性都具有值auto，并且元素被放置在静态位置。
- 它接受负整数值和正整数值以及常用单位，例如px、rem、em、%等。
z-index用于指定堆栈级别和层元素。- 默认值为
z-index0，除非您在元素上应用位置（静态除外），否则它将不起作用。 - 具有较大
z-index值的元素与具有较小值的元素重叠z-index。 - 它接受不带单位的正整数和负整数。
- 默认值为
1. 静态
position: static;是此属性的默认值，并且元素以其在文档中的正常流形式出现。- 属性：
top、right、bottom、left和z-index对定位 的元素没有影响static。 div查看下面的示例。带有类的蓝色static具有静态位置。
-
上面例子的代码：
div.static { position: static; /* Need not specify as this is default */ }
在这里查看代码笔：
2. 亲属
- 当
position: relative;应用于元素时，它会出现在文档的正常流中。 -
但与静态位置不同的是，它接受
top、、、和的值right。bottomleftz-index- 然后根据、、、的值将元素相对于自身放置，并根据 的值分层堆叠。
toprightbottomleftz-index
- 然后根据、、、的值将元素相对于自身放置，并根据 的值分层堆叠。
-
div在下面显示的示例中，具有类的蓝色元素relative具有相对位置，具有顶部和左侧偏移值。
-
上面例子的代码：
div.relative { position: relative; top: 5em; left: 25%; }
在这里查看代码笔：
3. 绝对
- 当
position: absolute;应用于元素时，它会脱离文档的正常流。 - 除非指定
top、right、bottom、值，否则它将保持在其原始位置。left - 其他元素忽略该元素，并且表现得好像它根本不存在。
z-index还可以指定堆叠和分层元素。
-
在下面的例子中，
div带有 的蓝色类absolute被赋予了相对位置，并且没有指定top、right、bottom和的值。left
-
看看当给出这个蓝色框时会发生什么
z-index: -1;
- 此部分的父部分
div.absolute是具有类的部分section，并且background-color: lightskyblue;具有z-index: 0;。 - 因为`z-index
ofsection.sectionis greater than that ofdiv.absolute, thediv` 堆叠在其父级下方。
- 此部分的父部分
- 通常，元素
position: absolute;相对于其最近定位的祖先（静态除外）放置。 -
如果未找到这样的祖先，则其仅相对于文档放置。
- 查看下面的示例，并注意元素相对于文档的放置方式。
- 查看下面的示例，并注意元素相对于文档的放置方式。
-
上面例子的代码：
div.absolute-two { position: absolute; top: 0; bottom: 0; left: 2em; }
-
如果我们为元素的父元素（或祖先元素）赋予绝对位置，请查看会发生什么情况：
position: relative;。
div检查具有类别的红色，以及具有类别的absolute-three浅天蓝色父级。sectionsection- 请注意，这次绝对位置
div.absolute-three是相对定位在父级内而不是文档内。
-
上述示例的代码为：
section.section { position: relative; } div.absolute-three{ position: absolute; bottom: 0; right: 25%; height: 100px; }
在这里查看最终的代码：
4. 固定
- 当
position: fixed;应用于元素时，它会脱离文档的正常流，类似于绝对位置。- 主要区别在于
position: fixed;元素在布局中没有给予空间。
- 主要区别在于
- 固定元素不受滚动影响，并根据
top、right、bottom和left值保持在指定位置。 - 定位元素是相对于文档的，除非它的祖先元素具有
transform、perspective或属性，并且应用了非nonefilter的值。- 然后，祖先就充当了亲属父母的角色。
-
看看下面的例子。
div蓝色背景的文本有一个 classfixed，position: fixed
-
上述示例的代码为：
div.fixed { position: fixed; top: 40vh; right: 25vw; left: 25vw; }
在这里查看 codepen
5. 粘性
- 当
position: sticky;应用于元素时，它会被定位在文档的正常流中，类似于相对位置。 - 但是当元素在定位祖先内滚动时，一旦超过 、 、 和 属性中指定的偏移值，它就会
top变为right固定bottom的left。
-
例如，查看下面的标题图片。
- 标题的父级是文档，并且它“粘”在文档中。当您滚动时，标题距离顶部 0（即 ）
top: 0;，它将变为固定定位元素。
- 标题的父级是文档，并且它“粘”在文档中。当您滚动时，标题距离顶部 0（即 ）
-
上述示例的代码为：
header.hero { position: sticky; top: 0; }
- 我们来处理另一种情况。但这次，我们使用一个位于另一个已定位祖先元素内的粘性定位元素。
- 在这种情况下，粘性定位元素（具有蓝色背景的文本）具有一类
sticky。 - 它的父级是
section具有类的section，并且具有lightskyblue background。 - 当你向下滚动并
div.sticky远离5px顶部时，它将变为固定元素。在此之前，它仍然是相对定位元素。 - 但这里有一个问题。当父元素
section.section从布局中滚出时，位置固定的 div 也会随之滚出。它不再保持固定，而是再次变为相对的。
- 在这种情况下，粘性定位元素（具有蓝色背景的文本）具有一类
-
因此，元素的粘性（特别是固定）行为仅保留在其最近定位的父元素内。
-
上述示例的代码为：
section.section{ position: relative; } div.sticky { position: sticky; top: 5px; }
在这里查看整个代码：
结论
呼！好多啊，不是吗？
我知道有时 CSS 可能会让人不知所措，但相信我，随着练习，概念会变得更加清晰。
该position属性非常重要，在各种场景中都很有用。
请查看我在这篇文章中解释的演示
relative和位置absolute经常被使用，当你有伪元素时，它们大多一起使用。- 这些位置也经常用于堆放物品。
absolute位置内位置的组合relative很常见，用于为元素添加阴影等样式。
- 该
sticky位置可用于标题和导航栏，如上面的Sticky示例所示。- 当您想要将元素固定在页面上，只要定位的父元素/祖先在视口上可见时，也可以使用它。
这些并非
position属性的唯一用例。我强烈建议您多加练习，深入了解这些概念。
非常感谢您阅读这篇文章！
这是我最后一篇关于 CSS 的博文。在接下来的文章中，我将重点讲解 JavaScript，并尝试解释一些重要的概念。
如果你喜欢这篇文章，请帮我点个爱心、独角兽或别针！
请分享给你的开发者朋友们，并在评论区写下你的感受！