<div class="container">
  <div class="container-caption">position: static; top: 150px; no height defined</div>
  <div class="box left top">
    position: absolute;  
    top:&nbsp;20px;
    left:&nbsp;20px;
  </div>
    <div class="box bottom right">
    position: absolute;  
    bottom: 20px;
    right: 20px;
  </div>
</div>  
  
.box {
  background-color: darkorange;
  border: 1px solid black;
  width: 100px;
  height: 100px;
  position: absolute;
}

.container {
  text-align: center;
  background-color: lightgray;
  border: 1px solid darkgray;
  position: static;
  top: 150px;

}

.top {
  top: 20px;
}

.left {
  left: 20px;
}

.bottom {
  bottom: 20px;
}

.right {
  right: 20px;
}

.container-caption {
  position:absolute;
  top:0px;
  width:100%;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.