将鼠标悬停在响应式 UI 中时停止移动其他 div

Question

In this plunker，当用户将鼠标悬停在 All Conversations 上时，id #chat-msgs 会向下移动（当浏览器宽度小于 767 像素时）。我尝试实施 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

在您的 body 标签上，您需要隐藏溢出，因为您似乎已经在代码的其他地方处理了溢出：

正文{ overflow:hidden; }

Answer 2

不太确定您认为绝对位置会在那里做什么，但是当绝对位置包含在具有相对位置的东西中时，它的效果最好。 Position absolute 将元素从常规流中移除，如果它包含在 position: relative 的东西中，该元素将 'catch' 它在某种意义上它不会超出该元素的边界，除非你明确告诉它与 css.

你应该从流程中取出的是#user-list。如果你把它从流中取出，它不会推动其他元素。

尝试：

.dropdown{ position: relative; }

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

将鼠标悬停在响应式 UI 中时停止移动其他 div

stop shifting of other divs when hover in a responsive UI

css

user-experience

twitter-bootstrap