CSS 位置

作为一名初学者，我曾经在理解 CSS 中的属性时遇到过很多困难Position。今天，我将在本文档中以非常友好易懂的方式讲解 Positions。那么，让我们开始吧。

什么是position属性？
顾名思义，Position 是 CSS 中用于设置元素位置的属性。
它有 5 个值，分别是：

• static
• relative
• fixed
• absolute
• sticky

现在又出现了一个问题，那就是我们为什么要使用这个位置属性？

答案是，在指定位置属性后，您可以使用另外四个属性，即、、top和，这将再次帮助您更好地塑造元素以增强前端。bottomleftright

注意：在指定position属性之前，不能直接使用这四个属性（top、bottom、left、right）。直接使用而不指定position属性是没有用的。

现在，我们知道了什么是position属性以及为什么要使用它。现在让我们快速跳到这五个值，并尝试更好地理解它们。

1. static

position: static;

现在，static 是默认的定位属性，它会根据 DOM 的常规流向来定位元素。
（注意：static 不支持 top、bottom、left 和 right 属性）

现在你知道了为什么没有定义position属性就无法使用top、bottom、left和right。（如果你没有定义position属性，浏览器会将其设置为static（默认行为），而top、bottom、left、right在static下无法使用。）

要点：静态是浏览器的默认行为。

1. relative

position: relative;

相对位置是指相对于元素的正常位置。
我知道你没理解。我们举个例子。
假设你创建了一个 div 元素，并设置了它的宽度和高度。现在，

position: relative;
left: 50px;

在 div 的 css 中应用这两行代码后，你会发现 div 从左侧偏移了 50px。这就是相对于正常位置的偏移量。再次强调，如果你应用

top: 100px;

你会发现你的 div 从顶部移动了 100px。
希望现在你明白了。

1. fixed

position: fixed;

固定和相对非常相似，但唯一的区别是，相对位置是元素相对于其正常位置的位置，而固定位置是相对于浏览器窗口的位置。
例如。

position: fixed;
left: 5px;

应用此 CSS 后，您的 div 将移动到距离浏览器窗口左侧 5px 的位置。
重要的是，它不会随您的网页滚动。它会固定在该位置。

但是假设你想固定 div 相对于浏览器窗口的位置，但同时又想让它随着页面滚动。你该怎么做呢？因为如果你应用了position-fixed属性，你的 div 就不会滚动了。

现在，出现了位置的概念：绝对。

1. absolute

position: absolute;

absolute 和 fix 之间有两个区别。a
. 前者固定，后者允许滚动。b
. 后者绝对值与最近的已定位祖先元素兼容。这意味着，fixed 会根据 DOM 窗口设置元素，而 absolute 会根据最近的已设置位置的祖先元素（父元素）设置 div。但是，如果没有父元素具有位置属性，那么它会像 fix 一样根据 DOM 设置元素，但仍然允许滚动。

1. sticky

position: sticky;

粘性与固定相同，唯一的区别是当元素在滚动时超出窗口时它会设置属性。

好了，以上就是关于position属性的全部内容。希望您阅读完本文档后能有所收获。谢谢。