position 属性的五个值：
static relative fixed absolute sticky
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
h2 {
position:absolute;
left:100px;
top:150px;
}
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right影响
div.static{
position: static;
border: 3px solid #73AD21;
}
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动
p.pos_fixed {
position:fixed;
top:30px;
right:5px;
}
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠
relative 定位
相对定位元素的定位是相对其正常位置。
h2.pos_left {
position:relative;
left:-20px;
}
h2.pos_right {
position:relative;
left:20px;
}
相对定位元素经常被用来作为绝对定位元素的容器块。
-------------------------------------------------------------------------------------------------------
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { /* 通配符选择器 */ margin: 0; padding: 0; } #box-1{ border: 1px solid red; /* margin: 0 auto;*/ margin-left: 600px; width: 50%; height: 300px; background-color: #9AA4FF; /* float: left;*/ /* display: inline-block;*/ } #box-2{ border: 1px solid greenyellow; width: 20%; height: 300px; background-color: orange; /* display: inline-block;*/ position: absolute; top: 0; left: 200px; } #box-2 .span-1{ border: 2px solid salmon; } </style></head><body> <div id="box-1"> 嘿嘿嘿 </div> <div id="box-2"> <span class="span-1">哈哈哈</span> </div></body></html>
来源：https://www.cnblogs.com/wangshuazi/p/9663284.html