CSS position Pattern

Take a look to this pattern and you will understand how it works. Assign your container position: relative;. There child assign position:absolute;. The absolute elements you can positioning by using top, bottom, left, right.

body {
  background: gray;
} 

.container {  
  position: relative;
  width: 50%;
  height: 100vh;
  border: 3px solid #73AD21;
  margin: 0px auto;
  text-align:center;  
}

.container div {
  padding: 10px;
}

.container div:nth-child(1) {
  background: yellow;
  position: absolute;
  width: 200px;
  height: 200px;  
  top: 50%;
  left: 20%;
}

.container div:nth-child(2) {
  background: green;
  position: absolute;
  width: 100px;
  height: 100px;  
  top: 20%;
  right: 20%;
}

.container div:nth-child(3) {
  background: red;
  position: absolute;
  width: 50px;
  height: 50px;  
  top: 10px;
  right: 10px;  
}

.container div:nth-child(4) {
  background: yellowgreen;
  position: absolute;
  width: 300px;
  height: 30px;  
  top: 10px;
  left: -20px;  
}
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>FLAG</div>
</div>

DEMO: https://codepen.io/mike-lowrey/pen/BamodMQ


Leave a Comment

Your email address will not be published. Required fields are marked *

*

*

Empfholende Artikel


Warum du keine Teufel-Lautsprecher kaufen solltest

May 3, 2025

Meine Erfahrung mit der Bluetooth-Box Teufel ROCKSTER GO – eine Odyssee mit unrühmlichem Ausgang. Qualität und Kundenbindung sind bei Teufel aus Berlin auf einem enttäuschend niedrigen Niveau angekommen. Man könnte dem Unternehmen mittlerweile eine Arroganz unterstellen, die durch nichts mehr gerechtfertigt ist. Warum? Hier ist meine Geschichte: Ich bekam die Teufel-Box zu Weihnachten geschenkt. Schon […]