Check out this example http://jsfiddle.net/4cu8m/
<div id="main1">
<div id="inner1"</div>
<div id="inner2"</div>
</div>
The positioning of inner1 and inner2 in the CSS are identical. They are both absolutely positioned within main1, which is a relatively positioned element. Interestingly, when I adjust the left coordinates for inner1, it also moves inner2. I always thought absolute positioning was relative to the first non-static parent element.
#main1 {
position: relative;
height: 100px;
width: 100px;
background-color: #f00;
opacity:0.7;
}
#inner1 {
position: absolute;
height: 100px;
width: 30px;
left : 10px;
background-color: #0f0;
opacity:0.7;
}
#inner2 {
position: absolute;
height: 100px;
width: 30px;
left : 10px;
background-color: #00f;
opacity:0.7;
}
Rather than ending up with what I expected