CSS，无论如何都要阻止孩子们创建自己的堆叠上下文？

Question

我只希望内容在固定标题下滚动，但标题顶部的模式。如果我从position: relative;中移除.content它会正常工作，但我无法在我的真实项目中移除它，有数百名儿童使用它和其他属性创建新的堆叠上下文。谢谢你的帮助。

这里是html html：

<div>
  <div class="header">

  </div>
</div>
<div class="content">
  <div class="modal">
  </div>
</div>

CSS：

.header {
  position: fixed;
  top: 0;
  height: 100px;
  width: 100%;
  background: blue;
}

.content {
  margin-top: 115px;
  height: 1000px;
  width: 100%;
  background: yellow;
  position: relative;
}

.modal {
  position: fixed;
  top: 25%;
  left: 25%;
  height: 50%;
  width: 50%;
  background: red;
  z-index: 10;
}

以及fiddle