Independantly position div's within a parent div

Question

I am trying to put 3 div children inside a parent div, where they have exact positions, and the children are not concerned about their siblings. I am trying to create a simple example, but all the child divs are relating to their siblings.

.parent {
  position: relative;
  height: 224px;
  width: 224px;
  border: 32px solid lightgrey;
}

.child {
  position: absolute;
  height: 64px;
  width: 64px;
}

.child1 {
  top: 32px;
  left: 32px;
  background-color: aqua;
}

.child2 {
  top: 32px;
  left: 128px;
  background-color: lightgreen;
}

.child3 {
  width: 160px;
  top: 128px;
  left: 32px;
  background-color: black;
}

<div class="parent">
  <div class="child child1" />
  <div class="child child2" />
  <div class="child child3" />
</div>

Where I have tried looking:

• http://www.wickham43.net/divboxes.php
• Position an HTML element relative to its container using CSS
• How to place div inside another div to absolute position?
• https://www.w3.org/TR/CSS21/visuren.html#comp-abspos

Answer 1

This works when closing the <div> tag with </div> rather than using a single <div />.

This is because in HTML5, the slash at the end of non-void tags (like div) are forbidden and ignored. So your original code is interpreted as each child being nested inside the previous one; hence each one is relative to its prior "sibling" (actually, its parent).

JSFiddle