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

Question

我希望#movingItem在h1元素下移动。我玩Z指数，但#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所说的那样，在我的p处添加position: relative;标签是我失踪的标签

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元素的显示。它不应该被设置为绝对的，但我认为你可能在考虑位置属性而不是显示。