使用负边距将 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;
    }

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

Using negative margin to adhere div1 to the left of div2

html

css

margin

HTML

CSS