position(absolute)绝对定位 脱离文档流
参照点为:距离当前元素最近的父定位元素,若所有父元素都没有定位元素,就参照游览器视口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>absolute</title>
<style>
body{
}
.outer {
background: #ccc;
width: 800px;
margin: 100px auto;
position: relative;
}
.outer > div:nth-child(1),
.outer > div:nth-child(3) {
height: 100px;
}
.outer > div.one {
background-color: lightblue;
}
.outer > div.two {
background-color: pink;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .5;
}
.outer > div.three {
background-color: teal;
}
</style>
</style>
</head>
<body>
<div class="outer">
<div class="one">第一个孩子</div>
<div class="two"></div>
<div class="three">第三个孩子</div>
</body>
</html>