CSS absolute positioned div affected by sibling [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

---

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 8 years ago.

Improve this question

I have this example http://jsfiddle.net/4cu8m/

<div id="main1">
    <div id="inner1"</div>    
    <div id="inner2"</div>    
</div>    

The CSS positioning for inner1 & inner2 are exactly identical. They are absolute positioned inside main1 - a relative positioned element. If I change the left co-ordinates for inner1, it shifts inner2 also. I thought the absolute positioning is relative to 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;
    }

Got this instead of

Answer 1

LIke this

please close div tag

html

<div id="main1">
    <div id="inner1"></div>    
    <div id="inner2"></div>    
</div>