CSS 位置属性解释！

介绍

在网页上将元素定位到正确位置时，我们总是遇到很多困难。有时，我们还会发现top/left/bottom/right对元素不起作用。CSS 的position属性控制着元素在网页上的位置及其行为。它也会影响网页上的其他元素。

今天，我们将研究 CSS 中的position属性及其不同值。

位置属性指定元素使用的定位方法类型。
- W3Schools

它定义了元素在文档中的位置。

位置属性主要有5个关键值

这是position属性的默认值。元素按放置顺序渲染。它不会破坏文档的流程。top /left/bottom/right属性不适用于静态position属性。

为什么使用：它可以在所有浏览器上扩展

该元素将从文档的正常流中移除。其他元素将表现得像该元素在文档中不存在一样。所有位置属性均有效。绝对定位元素是相对于其父元素的。

为什么要使用：何时根据父元素定位元素使用

该元素相对于其正常位置定位。它充当静态元素。现在，top/left/bottom/right属性将作用于该元素。它主要用于父元素。

为什么要使用：用于绝对定位元素的父元素

固定位置元素与绝对位置元素相同。它们脱离了文档的正常流。但与绝对位置元素不同的是，它们始终相对于 HTML 标签。

为什么使用：当您希望将标题固定在视口顶部时使用。

粘性位置是唯一的。它的行为取决于滚动。如果你滚动过了元素，它将粘在原位置。之后，它将像固定元素一样工作。

单击此处查看粘性位置属性的实时操作。

为什么使用：当您想在某个点击之后保留某些内容（例如“立即购买”、“登录”）。

希望现在您能够根据需要轻松定位元素。感谢您阅读这篇博文。

GIF 图片来源：FROONT BLOG