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

我想让div在bootstrap中显示为navbar。
我做了两个div，用两种方式搭配。
首先，我先找到迪沃尼格雷，然后找到迪沃尼蓝，

<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/

最佳答案

在第二种情况下，在渲染divBlue之后，您已经渲染了与divGrey重叠的divBlue，因此要显示divBlue，您需要对z-index:1应用divBlue，而在第一种情况下，您是在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>