<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.