html - 为什么会出现这种差异？

Question

我想让 div 在 Bootstrap 中看起来像 navbar。

我做了两个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代码的情况下，像First case需要做些什么？

编辑:这是我希望的结果: https://jsfiddle.net/d6wunt0L/

Answer 1

在第二种情况下，在渲染 divBlue 之后，您渲染了与 divBlue 重叠的 divGrey，因此要显示 divBlue 您需要为 divBlue 应用 z-index:1 而在第一种情况下，您正在渲染 blueDiv 在 greyDiv 之后，所以你在这里找不到任何问题。

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
 <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;z-index:1;"></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>