I have this code :
<div class="areaButton">
<input type="submit" value="Add">
</div>
.areaButton
{
float:left;
position:relative;
width:200px;
margin-left:18px;
margin-right:18px;
background-color:red;
}
.areaButton input
{
position:absolute;
right:0px;
top:0px;
}
but as you can see, the Input doesnt “feel” the container (where is the background-color:red;)?
Setting
position:absoluteremoves the element from the document flow, meaning it basically doesn’t occupy any space. Since this is the only element in the div, and there is no height width or padding on it, it doesn’t take up any space either, so you cannot see the background.