CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Vinc 웃
Vinc 웃

Reputation: 1257

Overlay on a bootstrap panel

I am trying to put an overlay div on a bootstrap panel.

Here my html :

<div id="container">
    <div id="navi">
        <div class="panel panel-default col-sm-6">
            <div class="panel-body">
                <h3><asp:label runat="server" id="lblsecretquestion"></asp:label></h3>
                <h4>Saisissez la réponse de votre question secrète :</h4>
                <div class="alert alert-danger" id="alerterror" style="display:none;position:relative;">
                    <strong>Oh snap!</strong> Change a few things up and try submitting again.
                </div>
                <div id="divtxtanswer" class="form-group">
                    <input runat="server" clientidmode="static" type="text" class="form-control " id="txtanswer" placeholder="Answer" />
                </div>
                <p id="errortxtanswer" style="color:Red;display:none;">Answer error</p>
            </div>
        </div>
    </div>
    <div id="infoi"></div>
</div>

Here's my css :

#container {
    width: 100px;
    height: 100px;
    position: relative;
}

#navi, 
#infoi {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#infoi {
    z-index: 10;
}

I am stuck. I don't know how I can achieve this, especially with bootstrap. Here's is the fiddle of my attempt : jsfiddle

Upvotes: 1

Views: 966

Answers (1)

rdleal
rdleal

Reputation: 1032

When you set the position property of an element to absolute, you remove the element from the normal flow and it becomes relative to its closest ancestor element that has the position set to either relative or absolute, or the entire body in case there's no positioned ancestor. In your case, in order to make the absolute positioned element recognize percentage values, you have to define the properties you want it to be relative (width and height) to the body.

Add this rule to your css:

html, body {
  width : 100%;
  height : 100%;
}

jsfiddle

Hope it helps.

Upvotes: 1

Related Questions