如何让div出现在具有比例变换的另一个div之上？

Question

我有一个导航栏，在页面向下滚动一定距离后，导航的位置样式设置为固定。但是，在导航的下方，我有三个div元素显示为高度为200px和宽度为250px的内联块，中心div的变换比例为1.1。中心div，由于某种原因，当向下滚动时，导航固定到页面，但中心div显示在导航上方。

这是滚动前后的屏幕截图：

滚动前：

滚动后：

以下是代码：

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop >= 150) {
    $(".viewport").css("position", "fixed");
    $(".viewport").css("top", "0");
  } else {
    $(".viewport").css("position", "static");
  }
});

.header {
  box-shadow: inset 0 -15px 15px -15px #ffffff, inset 0 300px 300px -300px #000000;
  background-color: #2b2b2b;
  width: 100%;
  height: 150px;
}
.viewport {
  border-bottom: 1px solid #ffffff;
  box-shadow: inset 0 15px 15px -15px #ffffff, 0 2px 1px -1px rgba(0, 0, 0, .4);
  background-color: #137ed6;
  width: 100%;
  height: 50px;
}
.hot {
  border-bottom: 1px solid #e6e6e6;
  border-radius: 5px;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, .4);
  background-color: rgba(0, 0, 0, .4);
  width: 150px;
  height: 100px;
  margin-right: 10px;
  display: inline-block;
}
.hot.cen {
  transform: scale(1.1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">

</div>
<div class="viewport">

</div>
<div style="text-align: center;margin-top: 15px;">
  <div class="hot">



  </div>
  <div class="hot cen">



  </div>
  <div class="hot">



  </div>
</div>
<div style="margin-bottom:400px;"></div>

为了代码片段的目的，我将三个div元素从250x200重新调整为150x100。

这是我的第一篇文章，所以如果格式不正确，我会道歉。 非常感谢任何帮助，谢谢！