Question

我有一个响应式导航，可扩展到下面的内容。即使使用position: absolute，在发生过渡时，它仍会压低较低的内容。问题出在过渡上。

我要解决的想法是，每当导航栏被单击时，将一个类添加到较低的内容中。这将立即为所有较低的内容添加绝对定位，因此不会妨碍下拉菜单。

除了要采取的所有复杂性之外，我还使用了react和react-bootstrap以及列表中的最后一个dropdown。这没有onTransitionEnd事件，因此添加后的类不知道如何删除。我以为下拉列表结束后，如果没有此事件，则不确定如何操作。

这是一个简单的问题，但是我不确定如何在不重写代码的情况下进行修复。我尝试过重新定位较低内容，但是无论我做什么，下拉列表都会使其或其边距受到影响。一些解决方案说z-index应该可以解决，但是那没用。

如果没有解决方案，我很高兴听到重新设计的方法。

我对此问题做了demo。

Answer 1

这里有一些让您走上正确道路的方法：

.top-navbar {
  align-self: flex-end;
  height: 4em;
  max-width: 100px;
  width: 100px;
}
.navbar-nav {
  /*position: absolute;*/
  background-color: red;
}

唯一剩下的就是使按钮不会向上/向下颠簸，这应该不太难弄清楚

处理绝对位置元素上的过渡，推动其他元素

1 个答案: