如何确保我的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-index处于正确的轨道上，您可能只需要设置H1的z-index。您可以在H1上使用position：relative，因为它似乎不需要任何绝对定位。如果您希望稍后引入其他图层，则可以根据需要调整z-index值。

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

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