position:static|relative|absolute|fixed
大家下面示例代码先放在浏览器上跑，感性认识一下
static 默认值 （你啥都没有设置的时候就是默认值）没有脱离文档流
relative
设置了relative的元素会相对于自身原来在文档流的位置进行定位，不会影响其他元素的位置，
<style>
* {
padding: 0;
margin: 0;
}
body {
height: 100%;
}
ul,
li {
list-style: none;
}
.item {
border: 1px solid red;
margin-top: 10px;
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<li class="item">我是第1项</li>
<li class="item">我是第2项</li>
<li class="item">我是第3项</li>
<li class="item" style="position: relative;top:20px;left:20px;">我是第4项</li>
<li class="item">我是第5项</li>
<li class="item">我是第6项</li>
</ul>
</body>
absolute
设置了 top、left 值时，元素是相对于最近的定位上下文来定位的(定位上下文这玩意儿下文解释)
脱离文档流了, 导致父元素坍塌了
包裹性：p元素宽度本来是整个屏幕的宽度，现在只是内容的宽度
<style>
* {
padding: 0;
margin: 0;
}
ul,
li {
list-style: none;
}
.item {
border: 1px solid red;
margin-top: 10px;
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<li class="item">我是第1项</li>
<li class="item">我是第2项</li>
<li class="item">我是第3项</li>
<li class="item" style="position:absolute;left:20px;top:20px;">我是第4项</li>
<li class="item">我是第5项</li>
<li class="item">我是第6项</li>
</ul>
</body>
fixed
相对于浏览器的窗口的位置来定位的
<style>
* {
padding: 0;
margin: 0;
}
body {
height: 100%;
}
ul,
li {
list-style: none;
}
.item {
border: 1px solid red;
margin-top: 10px;
background-color: aqua;
}
.container {
border: 2px solid black;
}
</style>
</head>
<body>
<ul class="container">
<li class="item">我是第1项</li>
<li class="item">我是第2项</li>
<li class="item">我是第3项</li>
<li class="item" style="position: fixed;top:20px;left:20px;">我是第4项</li>
<li class="item">我是第5项</li>
<li class="item">我是第6项</li>
</ul>
</body>
影响其他元素的排列
https://github.com/suckitfa/css-position
原文：https://www.cnblogs.com/rookie123/p/14642724.html