html - 如何将两个固定块之一的子元素（具有较低的 z-index）放在最顶部？

Question

我的整个问题都在标题中。

我有单击黄色按钮时显示的侧面菜单。但是当侧边栏出现时，按钮就在它后面。我需要它在顶部，以便用户可以单击它并关闭侧边栏。Html 标记是复杂的，因此标记的严重变化是不可取的。

我需要将黄色按钮div放在最顶部，而不是标题，标题应该在侧边栏后面。怎么做？尝试了很多东西，但没有任何帮助......

<div class="header">
  <div>
    <div class="button">
      close
    </div>
  </div>
</div>
<div class="sidebar">
  fasdf
</div>

.header {
  height: 60px;
  background-color: green;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
}
.button {
  height: 60px;
  background-color: yellow;
  width: 60px;
  z-index: 100;
  flex: 1;
}
.sidebar {
  height: 100%;
  width: 100px;
  background-color: pink;
  position: fixed;
  top: 0;
  left: 0;
  flex: 1;
  z-index: 1;
  opacity: .9;
}

https://jsfiddle.net/epwx4s79/4/

标签： htmlcss