html - 向下滚动时，使边块保持在同一水平

我需要这样的布局：



向下滚动时，red块应与green块保持在同一级别：



我试图使用网格来解决此问题：
（plunker）

<div class="row md-padding">
  <div class="col-xs-3" style="background-color:red">
    <div>
      <h3>Red</h3>
    </div>
  </div>

  <div class="col-xs-5" style="margin-left:10px;margin-right:10px; background-color:green;">
    <div class="row">
      <h3 class="text-center">Green</h3>
    </div>
  </div>

  <div class="col-xs-3" style="background-color:red">
    <div>
      <h3>Red</h3>
    </div>
  </div>
</div>

它确实将红色块放置在应有的位置，但是当您向下滚动时，它们不再可见。

如何使红色方块保持相同水平？ （如img2所述）

最佳答案

您正在寻找

position:fixed;

更新了plunkr