如何确保我的 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 位置设置为绝对

我不会 post 我拥有的确切 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 元素的显示。它不应该设置为绝对值，尽管我认为您可能在考虑位置 属性 而不是显示。