Positioning elements with CSS in web development isn’t as easy as it seems. Things can get quickly complicated as your project gets bigger and without having a good understanding of how CSS deals with aligning HTML elements, you won't be able to fix your alignment issues.
在Web开发中使用CSS定位元素并不像看起来那样容易。 随着项目的扩大，事情会Swift变得复杂，并且如果不了解CSS如何处理对齐HTML元素，您将无法解决对齐问题。
There are different ways/methods for positioning elements with pure CSS. Using CSS float, display and position properties are the most common methods.
使用纯CSS定位元素有不同的方法/方法。 使用CSS 浮动，显示和位置属性是最常见的方法。
In this article, I will be explaining one of the most confusing ways for aligning elements with pure CSS: the position property. I also have another tutorial for CSS Display Property here.
在本文中，我将解释将元素与纯CSS对齐的最令人困惑的方法之一： position属性。 我在这里还有另一本CSS Display Property教程。
If you prefer, you can watch the video version of CSS Positioning Tutorial:
如果愿意，可以观看CSS Positioning Tutorial的视频版本：
Let's begin...
让我们开始...
CSS位置和助手属性 (CSS Position & Helper Properties)
So there are 5 main values of the Position Property:
因此， Position属性有5个主要值：
position: static | relative | absolute | fixed | sticky
position: static | relative | absolute | fixed | sticky
and additional properties for setting the coordinates of an element (I call them “helper properties”):
以及用于设置元素坐标的其他属性(我称它们为“帮助器属性” )：
top | right | bottom | left AND the z-index
top | right | bottom | left top | right | bottom | left与z-index
Important Note: Helper properties don’t work without a declared position, or with position: static.
重要说明 ：助手属性必须在没有声明的位置或带有position：static的情况下才能使用。
什么是Z-index？ (What is this z-index?)
We have height and width (x, y) as 2 dimensions. Z is the 3rd dimension. An element in the webpage comes in front of other elements as its z-index value increases.
我们将高度和宽度(x，y)设为2维。 Z是第三维。 网页中的元素会随着z-index值的增加而排在其他元素之前。
Z-index doesn’t work with
position: staticor without a declared position.Z-index不适用于
position: static或没有声明的位置。
You can watch the video on my channel to see how to use the z-index in more details:
您可以在我的频道上观看视频，以了解如何更详细地使用z-index ：
Now let’s move on with the position property values...
现在让我们继续进行position属性值 ...
1.静态的 (1. Static)
position: static is the default value. Whether we declare it or not, elements are positioned in a normal order on the webpage. Let’s give an example:
position: static是默认值 。 无论我们是否声明，元素都以正常顺序放置在网页上。 让我们举个例子：
First, we define our HTML structure:
首先，我们定义HTML结构：
<body>
<div class="box-orange"></div>
<div class="box-blue"></div>
</body>Then, we create 2 boxes and define their widths, heights & positions:
然后，我们创建2个框并定义其宽度，高度和位置：
.box-orange { // without any position declaration
background: orange;
height: 100px;
width: 100px;
}
.box-blue {
background: lightskyblue;
height: 100px;
width: 100px;
position: static; // Declared as static
}As we can see in the picture, defining position: static or not doesn't make any difference. The boxes are positioned according to the normal document flow.
正如我们在图片中看到的，定义位置：静态与否没有任何区别。 这些框的位置根据常规文档流程确定 。
2.相对 (2. Relative)
position: relative: An element’s new position relative to its normal position.
position: relative ： 元素相对于其正常位置的新位置。
Starting with position: relative and for all non-static position values, we are able to change an element’s default position by using the helper properties that I've mentioned above.
从position: relative开始position: relative和所有非静态位置 值，我们可以使用上面提到的辅助属性来更改元素的默认位置。
Let’s move the orange box next to the blue one.
让我们将橙色框移到蓝色框旁边。
.box-orange {
position: relative; // We are now ready to move the element
background: orange;
width: 100px;
height: 100px;
top: 100px; // 100px from top relative to its old position
left: 100px; // 100px from left
}NOTE: Using position: relative for an element, doesn’t affect other elements’ positions.
注意：使用position：相对于元素，不会影响其他元素的位置。
3.绝对的 (3. Absolute)
In position: relative, the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent.
在position: relative ，元素相对于自身定位。 但是， 绝对 定位元素相对于其父元素。
An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element. If it doesn’t have any parent elements, then the initial document <html> will be its parent.
从常规文档流中删除position: absolute的元素。 它会自动定位到其父元素的起点( 左上角) 。 如果没有任何父元素，则初始文档<html>将为其父元素。
Since position: absolute removes the element from the document flow, other elements are affected and behave as the element is removed completely from the webpage.
由于position: absolute从文档流中删除了该元素，因此其他元素会受到影响并表现为完全从网页中删除该元素。
Let’s add a container as parent element:
让我们添加一个容器作为父元素：
<body>
<div class="container">
<div class="box-orange"></div>
<div class="box-blue"></div>
</div>
</body>.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
}Now it looks like the blue box has disappeared, but it hasn’t. The blue box behaves like the orange box is removed, so it shifts up to the orange box’s place.
现在看来，蓝色框已经消失了，但是没有消失。 蓝色框的行为就像删除橙色框一样，因此它会向上移动到橙色框的位置。
Let’s move the orange box 5 pixels:
让我们将橙色框移动5个像素：
.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
left: 5px;
top: 5px;
}The coordinates of an absolute positioned element are relative to its parent if the parent also has a non-static position. Otherwise, helper properties position the element relative to the initial <html>.
如果父元素也具有非静态位置 ，则绝对定位元素的坐标是相对于其父元素的。 否则，助手属性将相对于初始<html>定位元素。
.container {
position: relative;
background: lightgray;
}
.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
right: 5px; // 5px relative to the most-right of parent
}4.固定 (4. Fixed)
Like position: absolute, fixed positioned elements are also removed from the normal document flow. The differences are:
像position: absolute ，固定位置的元素也会从常规文档流中删除。 不同之处在于：
They are only relative to the <html> document, not any other parents.
它们仅相对于<html>文档，而不是其他任何父项。
They are not affected by scrolling.
它们不受滚动影响 。
.container {
position: relative;
background: lightgray;
}
.box-orange {
position: fixed;
background: orange;
width: 100px;
height: 100px;
right: 5px; // 5px relative to the most-right of parent
}Here in the example, I change the orange box’s position to fixed, and this time it is relative 5px to the right of the <html>, not its parent (container):
在此示例中，我将橙色框的位置更改为fixed ，这一次它是<html>右侧的相对5px，而不是其父级(容器) ：
As we can see, scrolling the page doesn’t affect the fixed positioned box. It is not relative to its parent (container) anymore.
如我们所见，滚动页面不会影响固定位置的框。 它不再是相对于其父级(容器)的。
5.粘性 (5. Sticky)
position: sticky can be explained as a mix of position: relative and position: fixed.
position: sticky可以解释为position: relative和position: fixed 。
It behaves until a declared point like position: relative, after that it changes its behavior to position: fixed . The best way to explain position: sticky is by an example:
它的行为一直到声明的点(例如position: relative为止，然后将其行为更改为position: fixed 。 解释位置的最佳方法：粘性是一个示例：
IMPORTANT: Position Sticky is not supported in Internet Explorer and earlier versions of other browsers. You can check the browser support at caniuse.com.
重要说明： Internet Explorer和其他浏览器的早期版本不支持Position Sticky。 您可以在caniuse.com上检查浏览器支持。
The best way to understand the CSS Position Property is by practice. Keep coding until you have a better understanding. If something is not clear, I will answer your questions below in the comments section.
理解CSS位置属性的最好方法是实践。 继续编码，直到您更好地理解为止。 如果不清楚，我将在下面的评论部分回答您的问题。
If you want to learn more about web development, feel free to follow me on Youtube!
如果您想了解有关Web开发的更多信息，请随时 在YouTube上关注我 ！
Thank you for reading!
感谢您的阅读！
3344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
