I'm having a strange problem positioning a set of divs inside another div. I think it will be best to describe it with an image:
Inside the black (#box) div there are two divs (.a, .b) that have to positioned in the same place. What I'm trying to achieve is pictured in the first image, second one is the effect I get. It looks like if the divs were floated without clearing or something, which is obviously not the case. Any ideas would be welcome!
Here's the code for this sample:
CSS:
#box {
background-color: #000;
position: relative;
padding: 10px;
width: 220px;
}
.a {
width: 210px;
position: absolute;
top: 10px;
left: 10px;
background-color: #fff;
padding: 5px;
}
.b {
width: 210px;
position: absolute;
top: 10px;
left: 10px;
background-color: red;
padding: 5px;
}
#after {
background-color: yellow;
padding: 10px;
width: 220px;
}
HTML:
<div id="box">
<div class="a">Lorem</div>
<div class="b">Lorem</div>
</div>
<div id="after">Hello world</div>
position: static
, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.position: relative
, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.position: absolute
, the element is removed from the document and placed exactly where you tell it to go.So in regard to your question you should position the containing block relative, i.e:
#parent {
position: relative;
}
And the child element you should position absolute to the parent element like this:
#child {
position: absolute;
}