使用负边距将div1粘贴到div2的左侧

Question

我想在侧边栏的联系人左侧附加一个关闭按钮，如下图所示：https://i.imgur.com/oj2Qi2t.png

但是在使用margin-left: -50px;或left: -50px;之后，dismiss div消失了！通过检查元素，它的位置是正确的，但是我不知道如何正常显示它，它应该是紫色正方形。

完整的演示是：https://codepen.io/anon/pen/YbpZaV

HTML

<nav class="sidebar">
  <div class="dismiss">dismiss</div>
  <div class="contacts">
</nav>

CSS

.sidebar {
  width: 250px;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  transition: all 0.3s;
  z-index: 40;
}

.dismiss {
  width: 50px;
  height: 50px;
  background-color: #7386d5;
  position: absolute;
  top: 50%;
  margin-left: -50px;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 40;
}

Answer 1

您应删除overflow-y: auto：-

    .sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;      
    transition: all 0.3s;
    z-index: 40;
    }