position属性
static：（静态定位）默认值，元素出现在正常的流中
relative: （相对定位）脱离正常的文本流，但其在文本流中的位置依然存在。
absolute: （绝对定位）相对于static定位意外的第一个父元素定位
<style>
.div3 {
position: relative;
width: 300px;
height: 300px;
background: red;
}
.div1 {
position: absolute;
width: 100px;
height: 100px;
background: yellow;
top: 20px;
left: 20px;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
background: green;
top: 20px;
left: 20px;
}
.div4 {
position: relative;
width: 300px;
height: 300px;
background: pink;
}
.div5 {
position: absolute;
width: 100px;
height: 100px;
background: palegoldenrod;
top: 20px;
left: 20px;
}
.div6 {
position: absolute;
width: 100px;
height: 100px;
background: goldenrod;
top: 20px;
left: 20px;
}
.div7 {
position: fixed;
width: 300px;
top: 300px;
left:300px;
height: 300px;
background: gray;
}
.div8 {
position: absolute;
width: 100px;
height: 100px;
background: purple;
top: 20px;
left: 20px;
z-index: 99999;
}
/* .div9 {
position: absolute;
width: 100px;
height: 100px;
background: goldenrod;
top: 20px;
left: 20px;
} */
</style>
<div class="div3">
<div class="div1">1</div>
<div class="div2">2</div>
</div>
<div class="div4">
<div class="div5">4
<div class="div6">5</div>
</div>
</div>
<div class="div7">
<div class="div8">7
</div>
</div>
结果.png
- fixed:（固定定位）相对于浏览器进行定位不论窗口滚动与否，元素都会留在那个位置
