/*方位值 top bottom距离参考对象底部的距离 left right 支持负值*/
<!doctype html>
<html>
<head>
<title>定位</title>
<style>
*{margin:0;padding:0;}
.box{position:fixed;/*使其不影响其他布局
postion 设置定位的属性
fixed 固定定位 参考对象是窗口
*/
top:200px;
background:red;
width:200px;
height:200px;}
p{width:800px;
/*height:800px;*/
border:5px solid red;
}
</style>
</head>
<body>
<div class="box">
dsnaad
</div>
<p>
</p>
<p>
</p>
<p>
</p>
</body>
</html>
relative 相对定位
1.不会改变元素本身的特性
2.以自身为参考对象
3.相对定位不给方位值和普通元素一样
4.给定方位值，原位置仍保留，也不会影响其他元素的布局
absolute 绝对定位
1.会让元素脱离文档流
2.可以设置参考对象，默认是body为参考对象
3.给直系父级添加position属性，并且值不为sattic可 以设为参考对象(static为默认值)
4.脱离文档流
5.会改变元素特性，变为块级
a.不会独占一行
b.宽度默认为0
<!doctype html>
<html>
<head>
<title>层级</title>
<style>
ul,li{padding:0;list-style:none;}
ul{ position:relative; width:500px;background:red;}
li{ width:100px; height:100px; font-size:50px; text-align:center; border:2px solid; }
.l1{ position:absolute; background:blue; }
.l2{ z-index:1;/*支持负值 会在所有元素之下*/ position:absolute; width:150px; height:150px; background:red; }
.l3{ position:absolute;width:200px; height:200px; background:yellow; }
</style>
</head>
<body>
<ul>
<li class="l1">1</li>
<li class="l2">2</li>
<li class="l3">3</li>
<!-- 定位元素的层级 默认后面的比前面的高
z-index 设置非static值的定位元素的层级
auto 默认 自动
一般直系比较
</ul>
</body>
</html>
原文：https://www.cnblogs.com/Chen-Tan/p/12246036.html