Html CSS绝对定位div受同级影响

我有这个例子

得到了这个而不是像这样

please close div tag

html

---

多么愚蠢的错误啊。谢谢你。请更正你的html div标签…你在下面的答案中给出了错误的代码@Fags就是这么写的。谢谢。对不起，请忽略…：

    #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;
    }

please close div tag

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