在本教程中，我们将学习CSS Position属性。

位置

我们使用" position"属性来定义元素在网页中的位置。

以下是position属性的值。

• static (静态的)
• fixed (固定)
• relative (相对的)
• absolute (绝对)

布局示例

在下图中，我们有6个div，我们将更改其位置。

我们的页眉和页脚为蓝色。

然后，将容器放入浅灰色中。

在容器的侧面，我们还有4个div，分别为橙色，绿色，粉红色和黄色。

上述布局的HTML如下所示。

<div id="header">
	<p>id="header"</p>
</div>
<div id="container">
	<p>id="container"</p>
	<div id="div-1">
		<p>id="div-1"</p>
		<p>This is a sample paragraph.</p>
	</div>
	<div id="div-2">
		<p>id="div-2"</p>
		<p>This is a sample paragraph.</p>
	</div>
	<div id="div-3">
		<p>id="div-3"</p>
		<p>This is a sample paragraph.</p>
	</div>
	<div id="div-4">
		<p>id="div-4"</p>
		<p>This is a sample paragraph.</p>
	</div>
</div>
<div id="footer">
	<p>id="footer"</p>
</div>

位置：静态

这是默认值，每个元素都以位置静态开头。
这意味着该元素将出现在其通常会出现的位置。

如果要覆盖元素的先前设置位置，则将其position属性设置为static。

在以下示例中，我们将div的位置设置为static。

div {
	position : static;
}

位置：固定

当我们想要设置元素相对于浏览器窗口(视口)的位置时，我们将position属性的值设为fixed。

即使页面滚动，固定位置的元素也将保持在其位置。
当将position属性设置为fixed时，我们必须使用top，right，bottom和left属性指定位置。

在下面的示例中，我们将div的位置(具有ID div-4)设置为固定，并将bottom属性设置为30px，right属性设置为30px。
这意味着div将位于右下角。

right：30px表示从右移30像素(向左)。

bottom：30px表示从底部向下移动30个像素(向上)。

#div-4 {
	position : fixed;
	bottom : 30px;
	right : 30px;
}

我们可以在上图中看到div-4位于右下角，并且位于容器div之外。

职位：相对

如果我们想将元素放置到相对于其原始位置的新位置(通常会发生的位置)，则将"相对"值设置为position属性。

我们可以使用top，right，bottom和left属性将元素相对于其原始位置进行定位。

在下面的示例中，我们将div的位置(具有ID div-2)设置为relative，并将其属性设置为left到30px，top到30px。

left：30px表示从左边移30个像素(向右)。

top：30px表示从顶部向下移动30个像素。

#div-2 {
	position : relative;
	left : 30px;
	top : 30px;
}

我们可以在上图中看到div-2从其原始位置移开并创建了一个空白空间。
该空白区域仍被div-2占用，因此其他div尚未向上移动以代替它。

位置：绝对

如果我们希望将元素放置在确切的位置，则使用"绝对"值。

我们可以使用top，right，bottom和left属性将元素精确定位在页面上所需的位置。

在下面的示例中，我们将div-2的position属性设置为absolute，并将top属性的值设置为30px，将left属性的值设置为300px。

left：300px表示从左边移300像素(向右)。

top：30px表示从顶部向下移动30个像素。

#div-2 {
	position : absolute;
	top : 30px;
	left : 300px;
}

如上图所示，div-2现在位于距顶部30像素和距左侧300像素的位置，并且它已离开其原始位置，因此其他div已取代其位置。

相对位置+绝对位置

我们还可以使用相对和绝对定位的组合来不同地放置元素。
例如，我们可以将父元素的位置属性设置为相对，然后将子元素的位置属性设置为绝对。
这样，我们可以将孩子相对于父母的位置定位在绝对位置。

在下面的示例中，我们将div(具有id容器)的position属性设置为relative，将div-2的position属性设置为absolute，并将其top属性设置为0px并将right position设置为0px。

因此，div-2将位于容器div内的右上角。

right：0px表示从右移动0个像素(向左)，即向右移动。

top：0px表示从顶部移动0个像素(向下)，即坚持到顶部。

#container {
	position : relative;
}

#div-2 {
	position : absolute;
	top : 0;
	right : 0;
}