position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值

position: static;

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。

代码

<div>​
	这个div元素设置了 position: static;
</div>

样式

div{
	position: static;
	border: solid 3px darkgreen;
}

position: relative;

position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

代码

<div>​
    这个元素设置了 position: relative;
</div>

样式

div{
	position: relative;
	border: solid 3px darkgreen;
	left: -20px;
}

position: fixed;

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

代码

<div>​
	这个元素设置了 position: fixed;
</div>

样式

div{
	position: fixed;
	border: solid 3px darkgreen;
	bottom: 0;
	right: 20px;
}

position: absolute;

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

代码

<div class="relative-box">​
	这个元素设置了 position: relative;
	<div class="absolute">这个元素设置了 position: absolute;</div>
</div>

 样式

.relative-box {
	position: relative;
	width: 600px;
	height: 300px;
    border: 3px solid darkblue;
} 
.absolute{
	position: absolute;
	top: 80px;
	right: 0;
	width: 200px;
	height: 100px;
	border: 3px solid darkred;
}

position: sticky;

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止，然后将其“粘贴”在适当的位置。

代码

<div class="sticky">这个div元素设置了 position: sticky;</div>
<div class="div"></div>

样式

.sticky{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color: green;
	border: 3px solid darkred;
}
.div{
	height: 1500px;
				
}

重叠元素

在对元素进行定位时，它们可以与其他元素重叠。

z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。

元素可以设置正或负的堆叠顺序。

代码

<div class="div"></div>
<p>这是一个p标签</p>

样式

.div{
	position: absolute;
	width: 300px;
	height: 200px;
	background-color: pink;
	left: 0;
	top: 0;
	z-index: -1;
}