简介

在本文中，您将通过大量的演示和学习辅助工具了解如何使用css的position：Relative和Position。

Css‘Position有时被认为是一个高级话题，因为它可以做一些有些意想不到的事情。那么，不要让专家`吓倒你，不让你追求卓越的css能力！一旦你具备了一些基本的想法，这就是一个非常容易理解的话题。

Render Flow

理解相对/绝对定位的一个重要概念是呈现流。

一般的想法是，所有的HTML元素都会占用一些空间。你的浏览器的渲染引擎总是以网格的方式渲染一切，从左上角开始，然后连续向右下角移动，直到它完成放置所有的HTML内容。

如果你曾经有过速度很慢的互联网连接，看到网页上的大东西会把所有东西都向右和向下推，那基本上就是在行动中的渲染流。

您可以使用csspostion更改此默认行为。

Css位置有时被认为是一种高级技能，因为它不像字体大小‘或边距等那样直观，因为它改变了浏览器的自然呈现流`。

以下是csspostion的可能值：

1.foo {
2  position: static;
3  /* position: relative;
4  position: absolute;
5  position: sticky;
6  position: fixed; */
7}

今天我们只看‘立场：绝对’和‘立场：相对’，因为它们可能是最多才多艺的，一旦你对它们充满信心，它们就会让你获得更多的里程。

当你创建一个html元素position：relative时，它将保持在布局的流中，但你可以移动它！

1.green-square {
2  position: relative;
3  top: 25px;
4  left: 25px;
5  /* ... */
6}

除了position：relative之外，您通常还需要定义top、right、Bottom或left偏移量。

你可以把相对位置想成：相对于它最初的位置。在这种情况下，绿色正方形现在是它最初所在的位置的左侧的25px‘和顶部的25px。

同样值得注意的是，它的宽度和高度在正方形网格中保持不变。这意味着它仍然被认为是在布局中。它只是被轻推了一下。

绝对定位是一种非常强大的移动HTML元素的CSS规则。有时会产生意想不到的结果：

1.orange-square {
2  position: absolute;
3  top: 0px;
4  left: 0px;
5  /* ... */
6}

橙色方块实际上是这25个方块中的第13个(位于网格中间的那个)，但它看起来像是最后一个方块！怪怪的。使用位置：绝对将元素移出流，因此它的网格空间被折叠。

是的，但为什么它会一直在那里？！

橙色正方形被放置在0x，0y坐标(例如：左上角)。就像浏览器渲染总是从左上角开始一样，Position：Absidete元素也将其用作其渲染起点。您可以使用top/right/bottom/left属性从那里进行偏移量。

但是，你也可以给它不同的起始坐标。

1.grid {
2  position: relative;
3}
4.orange-square {
5  position: absolute;
6  top: 0px;
7  left: 0px;
8  /* ... */
9}

在上面的例子中，父元素(div.grid)有position：relative规则，这会导致橙色正方形以此作为其呈现原点。

虽然这看起来似乎是不直观的行为，但它实际上是故意的！考虑到这一点，您可以很好地控制在哪里/如何安排HTML元素……

当你开始使用‘位置：相对’和‘位置：绝对’时，它打开了一个设计可能性的新世界。您可以创建分层的可视元素，并对浏览器的呈现方式充满信心，从而放置您精心设计的可视元素。

<$>[注]在Mozilla Developer Network<$>了解有关csspostion的更多信息