0

私はあまり z-index ユーザーではありません。Web で z-index に関する多くの問題は、適切なプロパティを持たない他の要素であると読んだことがあります。残念ながら私も苦手です！とにかく、コードはここにあります: jsfiddle.net/B3N2Q。

ご覧のとおり、ページにはコンテンツを含む複数の div があります。div の内部をクリックすると (または実際には編集しますが、大したことではありません)、保存ボタンが表示されます。フィドルを見ると、親 div の後ろにあるはずのボタンも表示されていることがわかります。

私はずっとそれをすべての前に置くことができた、またはそれを手に入れることができましたz-index=-20;。

ここで問題は、onclick イベントの前にボタンを非表示にし、下にスライドすると表示されるようにするにはどうすればよいかということです。スライドダウンするタブのように見えるようにします。

4

2 に答える 2

2

要素を親要素の後ろに置くことはできません。割り当てた z-index に関係なく、常にその上にあります。

z-index を適切に適用するには、ボタンを div の外に移動する必要があります。デフォルトでは透明であるため、divの背景を設定します。

<div>
    <div style='position: relative; border:1px solid black; background-color: white; padding: 10px 10px 0px 10px;width:896px; height: 200px;z-index:50;'>
      your content here
      ...
    </div>
    <div class="button" style='width:100px;margin: -35px auto;'>
        <input type='button' style='border-top:none;border-top-left-radius:0px;border-top-right-radius:0px;' value='save' title='save this shit' />
    </div>
</div>

例: http://jsfiddle.net/uYGEd/1/

于 2013-06-02T19:13:53.520 に答える
1

子要素は、それが何であるかに関係なく、絶対に配置されていない限り、親の背後に表示できませんz-index。ただし、保存ボタンを非表示にするソリューションは非常に簡単です。あなたはただそれdisplay: noneを手に入れslideDown、それが目に見えるようになったときに手に入れることができます。別の解決策は、保存ボタンをコンテナーとは別の div に配置して、z-index適切に使用できるようにすることですが、それはより複雑になると思います。

于 2013-06-02T18:51:12.723 に答える