Question

我想在bootstrap中创建类似navbar的div。

我做了两个div并以两种方式搭配。

首先，我首先找到divOneGray，然后找divTwoBlue，

<div class="container-fluid">
    <div class="row" id="divGray">
        <div class="col-lg-8 col-lg-offset-2" style="background-color: #cccccc; height: 4000px;"></div>
    </div>

    <div class="row" id="divBlue">
        <div class="col-lg-8 col-lg-offset-2" style="background-color: #003366; height: 100px; position: fixed; bottom: 0px;"></div>
    </div>
</div>

在这种情况下，divBlue上方显示divGray，

但第二种情况，

 <div class="container-fluid">

    <div class="row" id="divBlue">
        <div class="col-lg-8 col-lg-offset-2" style="background-color: #003366; height: 100px; position: fixed; bottom: 0px;"></div>
    </div>
    <div class="row" id="divGray">
        <div class="col-lg-8 col-lg-offset-2" style="background-color: #cccccc; height: 4000px;"></div>
    </div>
</div>

divGray显示在divBlue上方。

为什么会这样？

如果没有并置html代码，第一种情况需要做什么呢？

修改这是我的希望结果： https://jsfiddle.net/d6wunt0L/

Answer 1

在第二种情况下，渲染divBlue后，您的渲染divGrey与divBlue重叠，因此显示您需要应用的divBlue {{ 1}}用于z-index:1 ，而在第一种情况下，您在divBlue之后呈现blueDiv，因此您在这里找不到任何问题。

＆＃13;

greyDiv

＆＃13;

Answer 2

试试这个：

<div class="container-fluid">

    <div id="divGray">
        <div class="col-lg-6" style="background-color: #cccccc; height: 4000px;"></div>
    </div>

    <div id="divBlue">
        <div class="col-lg-6" style="background-color: #003366; height: 100px; bottom: 0px;"></div>
    </div>

</div>

为何发生这种差异？

2 个答案: