Использование отрицательного поля для закрепления div1 слева от div2 - PullRequest
Новая
       15

Использование отрицательного поля для закрепления div1 слева от div2

0 голосов
/ 14 мая 2019

Я хочу прикрепить кнопку отклонения слева от контакта на боковой панели, как показано на этом рисунке: https://i.imgur.com/oj2Qi2t.png

Но после использования margin-left: -50px; или left: -50px; div dismiss исчезает! Его позиция правильна при проверке элемента, но я не знаю, как показать его как обычно, который должен быть фиолетовым квадратом.

Полная демонстрация: 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;
}

1 Ответ

0 голосов
/ 14 мая 2019

Вы должны удалить overflow-y: auto: - 

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