<div class="wrapper">
<section class="container">
  <div class="box position">
    I am a box (positional properties)
  </div>
</section>

<section class="container">
  <div class="box inset">
    I am a box (inset)
  </div>
</section>
</div>
.wrapper {
  font-family: monospace;
  > * + * {
    margin-top: 1rem;
  }
}

.container {
  background-color: coral;
  padding: 2rem;
  width: 350px;
  height: 150px;
  position: relative;
}

.box {
  background-color: blanchedalmond;
  padding: 1rem;
  display: inline;
  position: absolute;
  &.position {
    top: 5rem;
    left: 5rem;
    right: 5rem;
    bottom: 5rem;
  }
  &.inset {
    inset: 5rem;
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.