web-dev-qa-db-fra.com

jQuery: css z-index ne fonctionne pas

J'essaie de faire ma table pour montrer sur le dessus de la classe de superposition. Jusqu'ici tout va bien. S'il vous plaît aider.

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

Pour que z-index fonctionne, ajoutez position: relative ou position: absolute;Voici un jsfiddle

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

vous pouvez simplement ajouter $('table').css({ 'position': 'relative' }); à votre événement click

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

Une autre approche consiste à créer une ou plusieurs classes et à les appeler avec .addClass () ou .toggleClass ()

.zindex60 {z-index:60;}

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

Ajoutez la propriété position à table. Je suppose que dans votre cas, vous avez besoin de position: relative;.

z-index ne fonctionnera jamais si l'élément n'a pas de propriété position configurée.

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

Voici un jsfidle de travail: http://jsfiddle.net/Smartik/u96coj0q/3/

Voici un autre exemple qui minimisera le JS et utilisera davantage CSS: http://jsfiddle.net/Smartik/u96coj0q/5/

0
Andrei Surdu