常见的position定位方式如下:

  • static 默认值。元素出现在正常的普通流中
  • relative 生成相对定位的元素，相对于其在普通流中的位置进行偏移。
  • fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 iframe 进行定位。
  • inherit 继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。
  • absolute 生成绝对定位的元素， 相对于最近一级的 不是 static 的父元素来进行定位,如果没有找到的话，最终是根据body进行定位。

注意：
absolute定位的基准是相对于最近一级的不是默认值static的父元素(可以是absolute/relative/fixed等)来进行定位的，而不仅仅是相对于为position为relative的父级元素。父级元素还可以是absolute、fixed定位

absolute的定位基准不不仅仅是relative,还有absolute/fixed的，案例如下：
（下面content是absolute定位，在其外层套absolute/relative/fixed的定位方式，都可以作为absolute定位的基准）

效果如下：

as implementation 位置_static/inherit

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding:0;
				box-sizing: border-box;
			}
			.box_relative{
				width:300px;
				height:300px;
				position: relative;
				top: 100px;
				left: 100px;
				border: 1px solid gray;
			}
			.box_absolute{
				width:300px;
				height:300px;
				position: absolute;
				top: 100px;
				left: 500px;
				border: 1px solid gray;
			}
			.box_fixed{
				width:300px;
				height:300px;
				position: absolute;
				top: 100px;
				right: 100px;
				border: 1px solid gray;
			}
			.content{
				width:100px;
				height:100px;
				position: absolute;
				top: 100px;
				left: 100px;
				border: 1px solid gray;
			}
		</style>
	</head>
	<body>
		<div class="box_relative">
			relative
			<div class="content">absolute</div>
		</div>
		<div class="box_absolute">
			absolute
			<div class="content">absolute</div>
		</div>
		<div class="box_fixed">
			fixed
			<div class="content">absolute</div>
		</div>
	</body>
</html>
  • sticky ，它会产生动态效果，很像relative和fixed的结合，一些时候是relative定位，另一些时候自动变成fixed定位，因此，它能够形成"动态固定"的效果
    定位逻辑：
    当页面滚动，父元素开始脱离浏览器视口时（即部分不可见），只要与sticky元素的距离(与浏览器窗口的距离)达到生效门槛，relative定位自动切换为fixed定位；
    等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。
    用途：
    网页的搜索工具栏，初始加载时在自己的默认位置（relative定位），页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。等到页面重新向上滚动回到原位，工具栏也会回到默认位置。


    示例代码：
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body {
				height: 2000px;
				/* 为父容器设置一个很大的高度，方便演示 */
			}
			
			#father {
				width: 600px;
				height: 100%;
				background: lightpink;
				margin: 100px auto 1000px auto;
			}
			nav {
				position: sticky;
				top:50px;
				width: 500px;
				height: 50px;
				background: #096;
				margin: 10px auto;
			}
		</style>
	</head>

	<body>
		<main id="father">
			父元素
			<nav>导航栏</nav>
		</main>
	</body>

</html>