<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位</title>
<style type="text/css">
.center{
height: 600px;
width: 600px;
background-color: aqua;
position:relative;
left: 20px;
top: 40px;
/* 相对于正常位置的定位
相对定位元素移动，它原本所占的空间不会改变
*/
}
.box1{
height: 300px;
width: 300px;
background-color:palegreen;
position: absolute;
left: 20px;
/* 绝对定位的元素的位置相对于最近的已定位父元素，
如果元素没有已定位的父元素，那么它的位置相对于<html>
绝对定位使元素的位置与文档流无关，因此不占据空间。
绝对定位定位的元素和其他元素重叠。*/
}
.cnt{
height: 600px;
width: 600px;
background-color:bisque;
position:relative;
left: 20px;
top: 40px;
}
.box3{
height: 300px;
width: 300px;
background-color:palegreen;
position: absolute;
left: 50%;
top: 50%;
margin-left:-150px ;
margin-top:-150px ;
}
.cntt{
height: 600px;
width: 600px;
background-color:bisque;
position:relative;
left: 20px;
top: 40px;
}
.box4{
height: 300px;
width: 300px;
background-color:blueviolet;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
/* 垂直居中 */
.box5{
height: 300px;
width: 300px;
position: fixed;
bottom: 0;
right: 0px;
background-color:bisque;
/* Fixed定位
元素的位置与文档流无关，因此不占据空间
元素的位置相对于浏览器窗口是固定位置。 */
}
.box6{
position: sticky;
bottom: 10px;
width: 200px;
height: 200px;
background-color: black;
/* 依赖用户滚动，在 position:relative 与 position:fixed 定位之间切换
一般就像position:relative; 而当页面滚动超出目标区域时，它就像
position:fixed;，固定在目标位置。 */
}
</style>
</head>
<body>
<div class="center">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="cnt">
<div class="box3"></div>
</div>
<div class="cntt">
<div class="box4"></div>
</div>
<div class="box5"></div>
<div class="box6"></div>
</body>
</html>