PiotrS PiotrS - 27 days ago 6
HTML Question

Inherit position absolute



.Wrap
{
height:500px;
width:500px;
border:2px solid #000;
}
.container
{
margin-left:100px;
margin-top:100px;
width:300px;
height:300px;
background-color:grey;
}
.box
{
width:50px;
height:50px;
background-color:red;
position:absolute;
top:15px;
left:15px;

<div class="Wrap">
<div class="container">
<div class="box">
</div>
</div>
</div>





Is it possible that
class="box"
was child only
class="container"
? I mean that inherit position absolute from "container" but no from "Wrap".

Answer

To position the box relative to the container you either give set position: relative; on the container, or, as in below sample, remove the left/top on the box

Removing the left/top can give some unpredictable result though, as you give the browser the control to interpret how to position the box.

.Wrap {
  height: 500px;
  width: 500px;
  border: 2px solid #000;
}
.container {
  position: relative;
  margin-left: 100px;
  margin-top: 100px;
  width: 300px;
  height: 300px;
  background-color: grey;
}
.box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
}
<div class="Wrap">
  <div class="container">
    <div class="box">
    </div>
  </div>
</div>