#1 相对定位
以原来的位置为参考点
<!DOCTYPE html>
<html>
<head>
<title>定位</title>
<style type="text/css">
body{
border: 1px solid orange;
}
div{
width: 200px;
height: 200px;
color:#fff;
}
div.one{
background-color: red;
position: relative;
top: 30px;
left: 100px;
}
div.two{
background-color: green;
position: relative;
top: 100px;
}
div.three{
background-color: blue;
}
</style>
</head>
<body>
<!-- position: static
1 相对定位 position: relative;
不脱离标准文档流，可以调整元素；
以原来的位置为参考点
2 绝对定位 position: absolute;
脱离标准文档流；
不在页面上占位置；
压盖现象
根元素页面左上角为参考点
(子元素绝对定位
父元素相对定位)
3 固定定位 position: fixed; --> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> </body> </html>
#2 绝对定位
层级提高； positon: absolute;
# 小米搜索栏
原文：https://www.cnblogs.com/zhujing666/p/12335405.html