<div class="flex-box">
  <div class="flex01">
      display:block;<br>
      position:relative;
  </div>
</div>

<div class="flex-box">
  <div class="flex02">
      display:block;<br>
      position:absolute;
  </div>
</div>

<div class="flex-box">
  <div class="flex03">
      display:inline;<br>
      position:relative;
  </div>
</div>

<div class="flex-box">
  <div class="flex04">
      display:inline;<br>
      position:absolute;
  </div>
</div>
.flex-box {
  display:flex;
  align-items: center;
  justify-content: center;
  
  position:relative;
  width:150px;
  height:150px;
  border:1px solid #000;
  margin:20px auto;
}

.flex-box div {
  background-color:red;
  padding:5px;
  font-size:8px;
  color:#ffffff;
}

.flex01{
  display:block;
  position:relative;
}

.flex02 {
  display:block;
  position:absolute;
}

.flex03{
  display:inline;
  position:relative;
}

.flex04 {
  display:inline;
  position:absolute;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.