<div class="box box1">
DIV #1<br>position: fixed;
</div>
<div class="box box2">
DIV #2<br>position: relative;
</div>
<div class="box box3">
DIV #3<br>position: absolute;
</div>
<div class="box box4">
DIV #4<br>position: relative;
</div>
<div class="box box5">
DIV #5<br>position: static;
</div>
<div class="box box6">
DIV #6<br>默认position,与position: static等价
</div>
.box {
text-align: center;
border: 1px dashed #000;
line-height: 1.6;
vertical-align: middle;
padding: 10px;
}
.box1 {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 15%;
background: rgba(255, 221, 221, 0.7);
}
.box2,
.box4 {
position: relative;
width: 90%;
height: 100px;
background: rgba(204, 255, 204, 0.7);
}
.box2 {
margin-top: 80px;
}
.box4 {
margin-top: -30px;
margin-left: 30px;
}
.box3 {
position: absolute;
width: 15%;
right: 0;
top: 0;
bottom: 0;
background: rgba(255, 221, 221, 0.7);
}
.box5,
.box6 {
width: 90%;
height: 100px;
background: rgba(255, 255, 204, 0.7);
}
.box5 {
position: static;
margin-top: -30px;
}
.box6 {
margin-top: -30px;
margin-left: 30px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.