使用負邊距將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;
    }