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

Question

我需要这样的布局:

当你向下滚动时，red block 应该与 green block 保持在同一水平:

我尝试使用网格来解决这个问题:( 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>

它确实把红色 block 放在了它们应该在的地方，但是当你向下滚动时，它们就不再可见了。

如何让红色 block 保持在同一水平面上？(如 img2 中所述)

Answer 1

你在找

position:fixed;

已更新 plunkr