The CSS Position Property: Everything You Need to Know

Understanding how CSS affects the alignment of on-page elements can improve your design skills and enhance the user’s experience on your website. Even the most basic webpage designs can look amazing and function properly with CSS. As your website project gets more detailed, issues with aligning on-page elements may arise, and using CSS to position them can speed up your workflow.

CSS允许定位元素的不同方法。最常见的是位置，浮动和显示。在这篇文章中，我们将说明如何使用CSS位置属性来编辑网页的布局。我们将探索不同的位置类型，并查看如何定位文本和图像等元素以创建精美的网页设计。

请注意这些properties only work if the位置财产已经建立。它们还将受到位置价值的影响。

位置：静态

Source

静态定位是每个HTML元素的默认位置。实际上，您没有什么可以改变它的。它不会受到某些可能影响其他CSS位置类型的属性的影响。无论您与什么价值最佳,right,底部， 和leftproperties, they will not change, and neither will thez索引property.

位置：相对

Source

At this value, the element follows the render flow but will be shifted relative to its initial position. To determine the amount of offset, set values for the top, right, bottom, and left properties. The other elements around the one in relative position aren’t affected, but there will be extra space where the element would have been.

除非您想要新的堆叠上下文。本质上，这意味着您可以创建一组新的图层，这些图层将根据该元素堆叠。

Position: Fixed

Source

At this value, the element disregards the normal render flow. Instead, the element is positioned relative to theviewport(the area the user can see). It doesn’t move, even if the page is scrolled. There's no space left where it would have been located in the page layout.

Use the最佳,right,底部， 和left设置元素的最终位置的值。

Using the fixed value automatically establishes a new stacking context.

位置：绝对

Source

在此值下，该元素还忽略了正常的文档流，但不是根据视口定位，而是相对于最近的位置祖先定位。但是，像fixedvalue, there's no space created for it in the page layout.

如果没有定位的祖先，则该元素是相对于containing blockand moves with scrolling.

注意：定位元素是具有属性值的元素relative,fixed,absolute, or黏。

The values of最佳,right,底部， 和left确定元素的最终位置。如果价值z索引不是汽车, it creates a stacking context.

Position: sticky

Source

元素的位置由用户的滚动确定。取决于用户滚动的距离，其行为就像relativevalue element until the viewport meets a specified position — then it gets "fixed" in a spot.

它总是创建一个叠加context.

Keep in mind that using a framework likeBootstrap CSS将为您提供这五个类，这些类在CSS位置属性中很常见，以及控制元素位置的另外三个类。

这些其他类是固定的顶部，固定的底部和粘性顶部。让我们简要地定义下面的每个。

• 固定顶：使元素修复到屏幕顶部，从边缘到边缘
• 固定底：makes the element fix to the bottom of the screen, spanning from edge to edge
• 粘性：makes the element fix to the top of the screen, from edge to edge, after scrolling past the element

如果您有兴趣，可以查看这些Bootstrap CSS位置属性类的代码和示例。

现在，您了解了可以更改元素位置的不同方式 - 有或没有Bootstrap之类的框架 - 让我们仔细研究绝对定位和相对定位之间的区别。

尽管相对位置的元素仍保留在文档的流中，但具有绝对定位的人被删除了页面上列出的元素，好像该元素不在那样。

这是绝对CSS定位的示例：

Image Source

现在，这是相对CSS定位的示例：

Image Source

Fixed CSS Position

ThefixedCSS位置就像absolute位置有一个差异：除非任何元素的祖先都有其transform,perspective, or筛选设置为以外的值的属性没有任何, the initial containing block established by the viewport is the element's containing block. If set to没有任何, the ancestor takes the place of the element's containing block.

This way, you can create a floating element that will gradually attain a fixed position where it will remain despite the scrolling.

Here's an example of fixed CSS positioning:

Image Source

Now that we've discussed the different position types and values, let's look at how you can put them to use on your website.

如何将图像定位在CSS中

All of the same guidance regarding CSS positioning can be applied to styling images. Specifically, you'd define the image HTML as usual, adding any CSS class or ID selectors defining positioning.

Here's an example of how to position an image in CSS:

HTML:

CSS:

。relative {
位置：相对；
}

如何将文本定位在CSS中

同样，所有相同的CSS定位指南都可以应用于样式文本。具体来说，您会像往常一样定义文本的HTML格式，并添加任何CSS类或ID选择器以进一步定义定位。

Here's an example of how to position text in CSS:

HTML:

您的文字在这里

CSS:

。absolute {
位置: absolute;
}

应用您对CSS位置财产的了解

CSS position property is an advanced web design skill that will take practice to master. Bookmark this page and come back to it as you explore CSS position positioning on your website. When you’re ready for more, check out our Beginner’s Guide to HTML & CSS For Marketers.