在Internet Explorer中的相对定位

Question

I have a div named #info-box which I want to be somewhat transparent. In order to have the elements in this div not be transparent, you have to apply a relative position to them and make it look as if they are in the #info-box div. This works fine for me in Chrome but in Internet Explorer the content just follows normal flow. What am I doing wrong? http://jsfiddle.net/kcqtj/1/

Answer 1

you might wanna create something like this (pseudo-code). the non_transparent_child is the actual container and instead of putting transparency to it, have a transparent_child behind it emulate it instead. they are all contained in positioned_container which will be the one movable.

<wrapper>
    <positioned_container>       //parent that contains the two
        <transparent_child>      //this is your transparent stuff 
        <non_transparent_child>  //this will contain normal stuff
    </positioned_container>
</wrapper>

//relative so that the absolute children will be based from here
positioned_container{
    position:relative;
}

//set to stretch with the parent
transparent_child {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}