绝对定位
position:absolute;
1.开启绝对定位，元素脱离文档流（不同于相对定位），变成块元素。
2.绝对定位根据和它距离最近的开启相对定位的祖先元素定位，如果祖先元素没定位，则相对于窗口
3.使元素提升一个层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}/*通配选择器，去掉系统自带的内外边距*/
.box1{
width: 200px;
height: 200px;
background-color: blueviolet;
position: absolute;
/* left: 100px;
bottom: 100px; */
}
.box2{
width: 200px;
height: 200px;
border:brown 5px solid;
/* opacity: 0.5; */
}
.box3{
width: 200px;
height: 300px;
background-color:cadetblue;
position: absolute;
left: 200px;
bottom: 200px;
/* opacity: 0.5; */
}
</style>
</head>
<body>
<!-- div.box&*3 怎么按的？-->
<div class="box1"></div>
<div class="box2">
<div class="box3"></div>
</div>
</body>
</html>
