css - 在响应式 UI 中悬停时停止移动其他 div

Question

In this plunker ，当用户将鼠标悬停在 All Conversations 上时(当浏览器宽度 < 767px 时)，id #chat-msgs 会向下移动。我尝试实现 position: absolute 但它没有按预期工作。

@media (max-width: 767px) {
#user-list {
    display: none;
}
#chat-msgs {
  position:absolute;
}

#dropdownMenu2:hover + #user-list, #user-list:hover{  
  display: block;
}
}

Answer 1

不太确定您认为绝对位置会在那里做什么，但是当它包含在具有相对位置的东西中时，绝对位置效果最好。 Position absolute 将元素从常规流中取出，如果它包含在 position: relative 中，该元素将在某种意义上“捕获”它并且它不会超出该元素的范围，除非您明确告诉它CSS。

您应该从流程中删除的是#user-list。如果您将它从流程中取出，它不会插入其他元素。

尝试:

.dropdown{ position: relative; }

#dropdownMenu2:hover + #user-list, #user-list:hover{
   display: block;
   position: absolute;
   width: 100%;
   z-index: 1;
   background: #fff;
 }