javascript - 高 z-index parent 与低 z-index child

Question

让我解释一下情况，我有一个可拖动的 div，每当我开始拖动时，我都会向 div 应用一些引导线。 因为我希望 div 高于一切，所以我为包含 20000 的 z-index 的 div 元素设置了一个类!重要的。

碰巧我的指南继承了完全相同的 z-index，我不希望它们像其父 div 一样高于一切。

我有这样的东西:

<div id="parent" style="z-index: 20000 !important; width: 100px; height: 100px;">
   <div id="guide-lines">
      <div class="guide-top"></div>
      <div class="guide-left"></div>
      <div class="guide-right"></div>
      <div class="guide-bottom"></div>
   </div>
</div>

引导线是贯穿所有浏览器文档的线，用来指示它的位置。 但是，正如我所说，我不希望他们凌驾于一切之上。

是否有机会设置较低的 z-index？甚至 0 到指导线？

提前致谢。

Answer 1

Z-index 是相对于父级的，因此如果您希望子级低于父级，则需要使用负的 z-index。

z-index:-500;