处理推动其他元素的绝对位置元素上的转换
处理推动其他元素的绝对位置元素上的转换
提问于 2019-05-29 22:58:36
我有一个响应式的导航，可以扩展到下面的内容。即使使用position: absolute，当转换发生时，它仍然会下推较低的内容。问题出在过渡上。
我的解决方案是每当点击导航栏时，在较低的内容中添加一个类。这会暂时将绝对定位添加到所有较低的内容，这样它就不会妨碍下拉列表。
除了所有的复杂性之外，我还使用了react和react-bootstrap以及列表中的最后一个dropdown。它没有onTransitionEnd事件，所以我不知道如何在添加后删除这个添加的类。我想在下拉列表结束后，但没有这个事件，不确定该怎么办。
这是一个简单的问题，但我不确定如何在不重写代码的情况下修复它。我已经尝试重新定位较低的内容，但无论我做什么，下拉菜单都会命中它，或者它的边距。一些解决方案说z-index应该解决，但这并不起作用。
如果没有解决方案，我很高兴听到重新设计的方法。
我已经做了一个关于这个问题的demo。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-29 23:12:35
这里有一些方法可以帮助你走上正确的道路：
.top-navbar {
align-self: flex-end;
height: 4em;
max-width: 100px;
width: 100px;
}
.navbar-nav {
/*position: absolute;*/
background-color: red;
}剩下的唯一一件事就是做它，这样按钮就不会上下颠簸，这应该不会太难弄清楚
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56369562
复制相关文章
点击加载更多
相似问题
用包含实例索引的变量替换字符串的每个实例。
Prolog用变量替换列表中常量的每个实例
用变量替换实例
用regex替换变量替换Python字符串
替换Python字符串中每个字符的实例
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
