Css- About opacity

Question

I have a hider panel with opacity 0.5 (full-screen). I want use another panel on it. But i need to use the second one non-transparent. How should i design css classes?

<asp:Panel cssclass="hider" ID="HiderPanel" visible="false" runat="server">
        <asp:Panel CssClass="FormPanel" ID="formpanel"  runat="server">

    </asp:Panel>

    </asp:Panel>

And css:

.hider
{   
    display:block;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1;
    color:black;
    background-color:black;
    opacity:0.5;
    filter:alpha(opacity=20);
}

.FormPanel
{
    float:left;
    margin-left:5%;
    width:40%;    
    height:700px;
    border: 2px solid #555;
    z-index:2;
    background-color: #fff;
    color:white;
    padding: 10px;
}

Yes i didnt know how to search it. Sorry for that. I think i've solved the problem in this links with using position:absolute; in child panel. Thank u. @NicoO — , Aug 08 '16 at 07:35

score 1 · Answer 1 · answered Aug 08 '16 at 07:32

In my understanding you should keep both non-transparent/transparent separate. Then put both in one div.

<div>
    <div class="transparent fix-to-parent"></div>
    <div class="non-transparent its-own-size"></div>
</div>

And then set z-index of second parent.

Css- About opacity

1 Answers1