<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>笔记7</title>
<style>
.one{
width: 200px;
height: 200px;
background-color: red;
position: relative;/*设置相对定位 relative是相对自己原来的位置发生变化*/
}
.two{
width: 200px;
height: 200px;
background-color:yellow;
}
.three{
width: 200px;
height: 200px;
background-color:green;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
相对定位(相对于原来位置)
1.position: relative;相对定位<br/>
2.通过left,right,top,bottom属性确定元素在正常文档流中的偏移位置<br/>
3.相对于原位置移动,移动的方向和幅度由left,right,top,bottom属性确定,偏移前的位置保持不动<br/>
4.z-index层级设置<br/>
绝对位置(相对于父类)
1.需要设置position:absolute(绝对定位),使元素脱离文档流<br/>
2.使用 left,right,top,bottom属性相对于其最接近的一个具有定位属性的父块进行绝对定位<br/>
3.如果没有包含块,则相对于body元素(相对于浏览器窗口)<br/>
4.z-index层级设置<br/>
固定定位(相对于网页窗口)
position:fixed同background-attachment:fixed属性功能相同<br/>
z-index层级设置<br/>
</body>
</html>
来源:CSDN
作者:Bescheidenheit
链接:https://blog.csdn.net/Bescheidenheit/article/details/103473210