1. CSS定位属性（position）

position 属性指定了元素的定位类型。

position 属性的五个值：

static
relative
fixed
absolute
sticky

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative ; 而当页面滚动超出目标区域时，它的表现就像 position:fixed ;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。
inherit	规定应该从父元素继承 position 属性的值。
initial	设置该属性为默认值。

2. 部分值的展示效果

2.1 static 定位

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			div.static {
				position: static;
				border: 2px solid red;
			}
		</style>
	</head>
	
	<body>
		<h2>position: static;</h2>
		<div class="static">
			static定位;
		</div>
	</body>
</html>

2.2 fixed 定位

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			p.fixed {
				position: fixed;
				top: 30px;
				right: 5px;
				border: 2px solid red;
			}
		</style>
	</head>
	
	<body>
		<p class="fixed">fixed定位的段落</p>
		<p>普通段落</p>
		<p>普通段落</p>
		<p>普通段落</p>
		<p>普通段落</p>
		<p>普通段落</p>
		<p>普通段落</p>
	</body>
</html>

2.3 relative 定位

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			h2.relative-left {
				position: relative;
				left: -20px;
			}
			h2.relative-right {
				position: relative;
				left: 20px;
			}
			h2.relative-top {
				position: relative;
				top: -30px;
			}
		</style>
	</head>
	
	<body>
		<h2>正常位置</h2>
		<h2 class="relative-left">偏左移动</h2>
		<h2 class="relative-right">偏右移动</h2>
		<h2 class="relative-top">偏上移动</h2>
		<p> relative 定位会按照元素的原始位置对该元素进行移动。</p>
		<p><b>注意:</b> 即使 relative 定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>
	</body>
</html>

2.4 absolute 定位

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			h2 {
				position: absolute;
				left: 150px;
				top: 200px;
			}
		</style>
	</head>
	
	<body>
		<h2>这是一个绝对定位的标题</h2>
		<p>用绝对定位,一个元素可以放在页面上的任何位置,标题下面放置距离左边的页面150px和距离页面的顶部200px的元素。</p>
	</body>
</html>