Javascriptアニメーションが他の固定要素の下に留まるようにするにはどうすればよいですか？

Question

を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-インデックスも設定するだけです。おそらく、絶対位置を必要としないようなので、H1上でposition：relativeを使うことができます。後で紹介する他のレイヤーがある場合は、必要に応じてZ-インデックス値を調整できます。

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

編集：p要素の表示を2回確認したい場合があります。おそらく表示の代わりにポジションのプロパティを考えていたとは思うが、絶対に設定しないでください。