CSS 定位 position

position 属性的值:

  • static
  • relative
  • absolute
  • fixed
  • sticky

CSS - position:static 定位

默认值,即没有定位,遵循正常的文档流对象。因为这是默认值,所以很少设置这个值。

CSS - position:fixed 定位

  • 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
  • 脱离文档流,不占据空间,不影响其他元素的定位,页面显示时会与其他元素重叠。
  • 搭配使用 top, bottom, left, right
div{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 80px;
}

注:通常搭配使用 z-index

CSS - position:relative 定位

相对定位,指相对其正常的位置。

div{
	position:relative;
	left:20px;
}

相对正常位置的左边缘,正方向移动20px。可以是负值,left:-20px,负方向移动20px。

注:相对定位元素经常被用来作为绝对定位元素的容器块

CSS - position:absolute 定位

绝对定位,指位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于 <html>。

div{
	position: absolute;
	right:0;
}

搭配设置其父元素为 position:relative;

注:通常搭配使用 z-index

CSS - position:sticky 定位

粘性定位,基于用户的滚动位置来定位。是相对定位 relative 和固定定位 fixed 的结合。 在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top:100px), position:sticky这时的效果相当于fixed定位,固定到适当位置。

注:指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。

div{
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	background-color: #4CAF50;
}

z-index 元素的堆叠顺序

设置一个元素的堆叠顺序(哪个元素应该放在前面,或后面),可以有正数或负数的堆叠顺序 :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>pangugle 教程</title>
		<style>
			div{ width: 200px; height: 200px;}
			.div1{
				position: absolute;
				left: 0;
				top: 0;
				background-color: #5F9EA0;
				z-index: 100;
			}
			.div2{
				position: absolute;
				left: 50px;
				top: 50px;
				background-color: #A9A9A9;
				z-index: 200;
			}
		</style>
	</head>
	<body>
		<div class="div1">z-index: 100;</div>
		<div class="div2">z-index: 200;</div>
	</body>
</html>

效果如下 :

css_position_1.jpg

图1

如果两个定位元素重叠,没有指定z-index,最后定位在 HTML 代码中的元素将被显示在最前面