在响应式用户界面中悬停时停止移动其他div

Question

In this plunker，当用户将鼠标悬停在所有对话上时（当浏览器宽度<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

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

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

尝试：

type_id<Type>()

Answer 2

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

body {overflow：hidden; }