javascript - 如何确保我的 Javascript 动画保持在其他固定元素下方？

Question

我希望 #movingItem 移动到 h1 元素下。我使用了 z-index，但 #movingItem 始终位于顶部。我能做什么？

我的代码基本上是这样的。

js:

$("#movingItem").animate({ 'right': -20})

html:

<div>
 <p id="movingItem" style="position: absolute; z-index: 1">this moves</p>
 <h1 style="z-index: 2">Stationary element<h1>
<div>

p 将位置设置为绝对

我不会发布我所拥有的确切 CSS，因为我的代码库相当大，但这是我所拥有的的淡化版本。就像 @sm1215 所说，将 position:relative; 添加到我的 p 标签就是我所缺少的

Answer 1

您的 z 索引是正确的，您可能只需要设置 H1 的 z 索引即可。您可能可以在 H1 上使用position:relative，因为这似乎不需要任何绝对定位。如果稍后还想引入其他图层，您可以根据需要调整 z-index 值。

h1{
  position:relative;
  z-index:2;
}
#movingItem{
   position:absolute;
   z-index:1;
}

编辑:可能需要仔细检查 p 元素的显示。它不应该设置为绝对，尽管我认为您可能正在考虑位置属性而不是显示。