1.静态定位 static
不设置的时候的默认值就是static,静态定位,没有定位,元素出现在该出现的位置,块级元素垂直排列,行内元素水平排列
2.绝对定位 absolute
/* 绝对定位 position:absolute
*移动之后释放自己原来的位置,脱离文档流
*后面的元素可以占用原来的位置
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d{
width: 500px;
height: 500px;
border: 1px red solid;
}
.d1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 200px;
top: 100px;
}
.d2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="d">
<div class="d1"></div>
<div class="d2"></div>
</div>
</body>
</html>
3.相对定位 relative
/* 相对定位 position:relative
*相对于自己原来的位置变化,不会脱离文档流,不会释放自己的坐标原点
*后面的元素不可以占用其原来的位置
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d{
width: 500px;
height: 500px;
border: 1px red solid;
}
.d1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 200px;
top: 100px;
}
.d2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="d">
<div class="d1"></div>
<div class="d2"></div>
</div>
</body>
</html>
4.固定定位 fixed
/*
*固定定位 position:fixed
*相对于浏览器窗口的一个固定位置,脱离文档流,释放原有坐标原点
*后面的元素可以占用其原来的位置
*/
选定的元素相对于浏览器是不动的,就是滑轮滚动也不受影响,截了两张图来表示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1500px;
}
.d{
width: 500px;
height: 500px;
border: 1px red solid;
}
.d1{
width: 200px;
height: 200px;
background-color: red;
position: fixed;
left: 200px;
top: 100px;
}
.d2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="d">
<div class="d1"></div>
<div class="d2"></div>
</div>
</body>
</html>