代码笔展示问题。
https://s.codepen.io/NoMan2000/debug/rdPEYJ/xnrabdnqJadA
我为相当粗糙的HTML道歉，但这是来自next.js项目的输出，所以臃肿的混乱是其中的一部分。
无论如何，问题可以在元素#header-menu-buttonList中看到。这个想法很简单，一个菜单位于主网格元素下面。但无论出于何种原因，它只是坐在页面上。
您可以在调试工具中选择它，看它有宽度和高度。使用其z-index进行混乱不会使对象可见，只有删除position: absolute才能使其在页面上可见，但这会打开许多其他问题。
所以，任何人都知道：
1。）为什么这样做呢？ 2.）如何修复它或解决它？
答案 0 :(得分：0)
感谢橡皮鸭。 :)
所以问题是父元素是绝对定位的，而子元素是绝对定位的。我不会对我的所有CSS规则进行扼杀，但这似乎会将其保留在DOM中但不会使其可见。
解决方案是将孩子#header-menu-buttonList设置为position: static，将父#header-menu-button设置为position:absolute。