console 命令行工具 X clear

console

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>定位</title>
</head>

<body>
<section class="f1-container">
    <label class="title">例1：相对定位</label>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
        <div class="box box5"></div>
    </div>
</section>
<hr>
<section class="f2-container">
    <label class="title">例2：绝对定位</label>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
        <div class="box box5"></div>
    </div>
</section>
<hr>
<section class="f3-container">
    <label class="title">例3：父元素高度问题</label>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
        <div class="box box5"></div>
    </div>
</section>
</body>
</html>

.f1-container .container{
    padding: 10px;
    border: 1px solid #aaa;
}

.box {
    width: 100%;
    height: 30px;
}

.box1 {
    background: red;
}
.box2 {
    background:green;
}
.box3 {
    background: blue;
    position: relative;
    top: -20px;
    left: 20px;
    z-index: -1;
}
.box4 {
    background: yellow;
}
.box5 {
    background: pink;
}


.f2-container .container {
    position: relative;
    padding: 10px;
    border: 1px solid #aaa;
}
.f2-container .box2 {
    position: absolute;
}

.f3-container .container {
    /* position: relative; */
    padding: 10px;
    border: 1px solid #aaa;
}
.f3-container .box {
    position: absolute;
}
.f3-container .box3 {
    position: absolute;
    top: unset;
    left: unset;
}