CSS position属性

Positioning is what makes us determine where elements appear on the screen, and how they appear.

定位使我们能够确定元素在屏幕上的显示位置以及显示方式。

You can move elements around, and position them exactly where you want.

您可以移动元素，然后将它们精确定位在所需的位置。

In this post I’ll also see how things change on a page based on how elements with different position interact with each other.

在这篇文章中，我还将基于position不同的元素之间的交互方式，了解页面上的事物是如何变化的。

We have one main CSS property: position.

我们有一个主要CSS属性： position 。

It can have those 5 values:

它可以具有这5个值：

• static

  static

• relative

  relative

• absolute

  absolute

• fixed

  fixed

• sticky

  sticky

静态定位 (Static positioning)

This is the default value for an element. Static positioned elements are displayed in the normal page flow.

这是元素的默认值。 静态定位的元素显示在常规页面流中。

相对定位 (Relative positioning)

If you set position: relative on an element, you are now able to position it with an offset, using the properties

如果在元素上设置position: relative ，现在可以使用属性使用偏移量定位它

• top
  最佳
• right
  对
• bottom
  底部
• left
  剩下

which are called offset properties. They accept a length value or a percentage.

这称为偏移属性 。 他们接受长度值或百分比。

Take this example I made on Codepen. I create a parent container, a child container, and an inner box with some text:

以我在Codepen上制作的这个示例为例 。 我创建一个父容器，一个子容器以及一个带有一些文本的内部框：

<div class="parent">
  <div class="child">
    <div class="box">
      <p>Test</p>
    </div>
  </div>
</div>

with some CSS to give some colors and padding, but does not affect positioning:

使用一些CSS来提供一些颜色和填充，但不影响定位：

.parent {
  background-color: #af47ff;
  padding: 30px;
  width: 300px;
}

.child {
  background-color: #ff4797;
  padding: 30px;
}

.box {
  background-color: #f3ff47;
  padding: 30px;
  border: 2px dotted #333;
  font-family: courier;
  text-align: center;
  font-size: 2rem;
}

here’s the result:

结果如下：

You can try and add any of the properties I mentioned before (top, right, bottom, left) to .box, and nothing will happen. The position is static.

您可以尝试将我之前提到的任何属性( top ， right ， bottom ， left )添加到.box ，什么都不会发生。 该位置是static 。

Now if we set position: relative to the box, at first apparently nothing changes. But the element is now able to move using the top, right, bottom, left properties, and now you can alter the position of it relatively to the element containing it.

现在，如果我们设置position: relative对于盒子，起初显然没有任何变化。 但是，该元素现在可以使用top ， right ， bottom ， left属性移动，现在您可以相对于包含它的元素更改其位置。

For example:

例如：

.box {
  /* ... */
  position: relative;
  top: -60px;
}

A negative value for top will make the box move up relatively to its container.

top的负值将使盒子相对于其容器向上移动。

Or

要么

.box {
  /* ... */
  position: relative;
  top: -60px;
  left: 180px;
}

Notice how the space that is occupied by the box remains preserved in the container, like it was still in its place.

请注意，盒子所占据的空间是如何保留在容器中的，就像它仍然在原处一样。

Another property that will now work is z-index to alter the z-axis placement. We’ll talk about it later on.

现在可以使用的另一个属性是z-index用于更改z轴位置。 我们稍后再讨论。

绝对定位 (Absolute positioning)

Setting position: absolute on an element will remove it from the document’s flow, and it will not longer follow the page positioning flow.

设置position: absolute元素上的position: absolute会将其从文档流中删除，并且不再遵循页面定位流。

Remember in relative positioning that we noticed the space originally occupied by an element was preserved even if it was moved around?

还记得相对定位时，我们是否注意到元素原本占据的空间被保留了，即使它被移动了吗？

With absolute positioning, as soon as we set position: absolute on .box, its original space is now collapsed, and only the origin (x, y coordinates) remain the same.

使用绝对定位后，只要在.box上设置position: absolute ，它的原始空间现在就会消失，只有原点(x，y坐标)保持不变。

.box {
  /* ... */
  position: absolute;
}

We can now move the box around as we please, using the top, right, bottom, left properties:

现在，我们可以使用top ， right ， bottom ， left属性随意移动框：

.box {
  /* ... */
  position: absolute;
  top: 0px;
  left: 0px;
}

or

要么

.box {
  /* ... */
  position: absolute;
  top: 140px;
  left: 50px;
}

The coordinates are relative to the closest container that is not static.

坐标相对于最近的非static容器。

This means that if we add position: relative to the .child element, and we set top and left to 0, the box will not be positioned at the top left margin of the window, but rather it will be positioned at the 0, 0 coordinates of .child:

这意味着，如果我们添加position: relative对于.child元素的.child并且将top和left设置为0，则该框将不会位于窗口的左上边缘，而是会位于0，0 .child坐标：

.child {
  /* ... */
  position: relative;
}

.box {
  /* ... */
  position: absolute;
  top: 0px;
  left: 0px;
}

Here’s (how we already saw) of .child is static (the default):

这是.child的(我们已经看到的)是静态的(默认值)：

.child {
  /* ... */
  position: static;
}

.box {
  /* ... */
  position: absolute;
  top: 0px;
  left: 0px;
}

Like for relative positioning, you can use z-index to alter the z-axis placement.

与相对定位一样，您可以使用z-index来更改z轴位置。

固定位置 (Fixed positioning)

Like with absolute positioning, when an element is assigned position: fixed it’s removed from the flow of the page.

就像绝对定位一样，当为元素分配position: fixed将其从页面流中删除。

The difference with absolute positioning is this: elements are now always positioned relative to the window, instead of the first non-static container.

绝对定位的不同之处在于：元素现在始终相对于窗口而不是第一个非静态容器相对于窗口定位。

.box {
  /* ... */
  position: fixed;
}

.box {
  /* ... */
  position: fixed;
  top: 0;
  left: 0;
}

Another big difference is that elements are not affected by scrolling. Once you put a sticky element somewhere, scrolling the page does not remove it from the visible part of the page.

另一个很大的不同是元素不受滚动影响。 将粘性元素放置在某处后，滚动页面不会将其从页面的可见部分中删除。

粘性定位 (Sticky positioning)

While the above values have been around for a very long time, this one was introduced recently and it’s still relatively unsupported (see caniuse.com)

尽管上述值已经存在很长时间了，但是这个值是最近才引入的，仍然相对不受支持( 请参见caniuse.com )

The UITableView iOS component is the thing that comes to mind when I think about position: sticky. You know when you scroll in the contacts list and the first letter is sticked to the top, to let you know you are viewing that particular letter’s contacts?

我想到position: sticky时，会想到UITableView iOS组件position: sticky 。 您知道在滚动联系人列表并将第一个字母粘贴在顶部时，是否知道您正在查看该特定字母的联系人吗？

We used JavaScript to emulate that, but this is the approach taken by CSS to allow it natively.

我们使用JavaScript进行了仿真，但这是CSS原生采用的方法。

翻译自: https://flaviocopes.com/css-positioning/