Question

我正在尝试在引导程序面板上放置一个重叠div。

这是我的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>

这是我的css：

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

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

#infoi {
    z-index: 10;
}

我被困住了。我不知道如何实现这一点，尤其是使用bootstrap。这是我尝试的小提琴：jsfiddle

Answer 1

当您将元素的position属性设置为absolute时，您将从正常流中删除该元素，并将其相对于其position设置为relative的最近祖先元素如果没有定位祖先，请absolute或body或整个width。在您的情况下，为了使绝对定位元素识别百分比值，您必须定义您希望它与height相对的属性（body和html, body { width : 100%; height : 100%; }）。

将此规则添加到您的css：

{{1}}

jsfiddle

希望它有所帮助。

在引导板上叠加

1 个答案: