Search code examples
htmlcsspositioningabsolute

Red box isn't placed as expected

I tried to do this in code pen

HTML

<body>

<div class="container">

  <div class="red">

  </div>

</div>

<div class="blue">

  </div>

<div class="yellow">

  </div>

</body>



CSS


body{

  margin:0;

}

.container{

  postion:relative;

  height:300px;

  width:300px;

  background-color:green;

}

.red{

  height:100px;

  width:100px;

  background-color:red;

  display:inline-block;

  position:absolute;

  right:20px;

}

.blue{

  height:100px;

  width:100px;

  background-color:blue;

  display:inline-block;

  position:absolute;

  top:100px;

  left:100px;

}

.yellow{

  height:100px;

  width:100px;

  background-color:yellow;

  display:inline-block;

  position:absolute;

  top:0;

}

And this is what my preview looks like

enter image description here

The red box even though its parent is the div with class name container isn't placed 20px to the right with respect to the right side of the green box.

Why is that so?

Solution

  • Typo error postion:relative; to position:relative;

    .container{
  position:relative;
  height:300px;
  width:300px;
  background-color:green;

}


    body{

  margin:0;

}

.container{

  position:relative;

  height:300px;

  width:300px;

  background-color:green;

}

.red{

  height:100px;

  width:100px;

  background-color:red;

  display:inline-block;

  position:absolute;

  right:20px;

}

.blue{

  height:100px;

  width:100px;

  background-color:blue;

  display:inline-block;

  position:absolute;

  top:100px;

  left:100px;

}

.yellow{

  height:100px;

  width:100px;

  background-color:yellow;

  display:inline-block;

  position:absolute;

  top:0;

}
    <div class="container">

  <div class="red">

  </div>

</div>

<div class="blue">

  </div>

<div class="yellow">

  </div>