重叠父滚动元素

Question

我试图将具有.tools的最上面的父元素#canvas_area之外的绝对位置overflow:scroll重叠，但这似乎不起作用，但是如果您删除overflow:scroll属性，它会起作用。

HTML：

<div id="canvas_area">
  <div class="container">

    <div class="blocks">
       <div class="tools">
         x
       </div>
    </div>

    <div class="blocks">
      <div class="tools">
         x
       </div>
    </div>
  </div>
</div>

CSS：

#canvas_area{
  overflow:scroll;  // remove this and it works
  height:400px;
  width:400px;
  background-color:black;
  margin: 0 auto
}

.container{
  position:relative;
}

.blocks{
  overflow:hidden;
  width:200px;
  height:100px;
  background-color:white;
  margin-bottom:10px;
}

.tools{
  position:absolute;
  color:green;
  left:-40px;
}

我需要#canvas_area才能有一个滚动条，这是他们的一种解决方法吗？

这里是jsfiddle：https://jsfiddle.net/2exn6oq5/

从overflow:scroll移除#canvas_area，你会看到身体外面的绿色x，这就是我想要的。