web-dev-qa-db-ja.com

jQuery：css z-indexが機能しない

テーブルをオーバーレイクラスの上に表示するようにしています。これまでのところ悪い。助けてください。

http://jsfiddle.net/u96coj0q/

<table>
    <tr><td>Test</td></tr>
</table>
<button>Overlay</button>

table {
    background-color: white;
    height: 300px;
    width: 300px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    z-index: 50;
}

$('button').click(function() {
        $('body').append("<div class='overlay'></div>");
        $('table').css('zIndex', '60');
        $('table').css({ zIndex: 60 });
});
jquerycssz-index
9
Alex G

ために z-index機能するように追加しますposition: relativeまたはposition: absolute;これはjsfiddleです

table {
    position: relative; 
    background-color: white;
    height: 300px;
    width: 300px;
}
12
Brian Dillingham

クリックイベントに$('table').css({ 'position': 'relative' });を追加するだけです

$('button').click(function() {
    $('body').append("<div class='overlay'></div>");
    $('table').css('zIndex', '60');
    $('table').css({ 'position': 'relative' });
});
3
Moes

別のアプローチは、1つまたは複数のクラスを作成し、それらを.addClass（）または.toggleClass（）で呼び出すことです。

.zindex60 {z-index:60;}

$('button').click(function() {
   $('body').append("<div class='overlay'></div>");
   $('table').addClass('zindex60');
});
0
Ren

positionプロパティをtableに追加します。あなたの場合にはあなたが必要だと思いますposition: relative;。

z-indexは、要素にpositionプロパティが設定されていない場合は機能しません。

table {
    position: relative; /* this is required for z-index */
    background-color: white;
    height: 300px;
    width: 300px;
}

これが動作しているjsfidleです： http://jsfiddle.net/Smartik/u96coj0q/3/

JSを最小化し、CSSをさらに活用する別の例を次に示します。 http://jsfiddle.net/Smartik/u96coj0q/5/

0
Andrei Surdu