html - 子与父 Z-index 问题

Question

我查看了几个相关问题，但找不到解决方案。我什至尝试使用本文中的解决方案，但它对我不起作用。 > https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

我需要“悬停”在“底部”div 上。请注意，我无法更改元素的声明位置。

有解决办法吗？

我的代码:

.top {
  position: fixed;
  z-index: 1;
}

.hover {
  position: absolute;
  z-index: 999;
}

.bottom {
  position: absolute;
  z-index: 1;
}

<div class="top">top
  <div class="hover">HOVER</div>
</div>
<div class="bottom">bottom<div>

Answer 1

你不能。子元素只能在父区域内改变。如果您尝试更改子项的 css 并且它附加了父项，则父项的 css 将覆盖它。

您可以尝试使用 JS 将子项移到父 div 之外。我建议在 jquery 中使用 .append()。