jQuery: css z-index not working

Question

I'm trying to make my table to show on the top of the overlay class. So far so bad. Please help.

<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 });
});

Brian Dillingham · Accepted Answer · 2015-09-28 00:16:29Z

16

For z-index to work, add position: relative or position: absolute; Here is a jsfiddle

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

edited Sep 28, 2015 at 0:16

answered Aug 16, 2014 at 23:25

Brian Dillingham

9,3763 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nerdroid · Accepted Answer · 2022-05-08 04:14:50Z

8

you can just add $('table').css({ 'position': 'relative' }); to the click event

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

edited May 8, 2022 at 4:14

answered Aug 16, 2014 at 23:37

Nerdroid

14.1k5 gold badges62 silver badges72 bronze badges

2 Comments

Andrei Surdu Over a year ago

Why not adding the position directly in CSS as it should be? You know, all this JS can be in CSS and the only requirement to display the overlay would be to add another class to .overlay. ;)

Nerdroid Over a year ago

that is just another alternative way, in case you cannot edit the css file or the HTML file

Andrei Surdu · Accepted Answer · 2014-08-16 23:48:23Z

0

Add position property to table. I guess in your case you need position: relative;.

z-index will never work if the element does not have a position property set up.

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

Here is a working jsfidle: http://jsfiddle.net/Smartik/u96coj0q/3/

Here is another example that will minimize the JS and make use more of CSS: http://jsfiddle.net/Smartik/u96coj0q/5/

edited Aug 16, 2014 at 23:48

answered Aug 16, 2014 at 23:34

Andrei Surdu

2,3613 gold badges23 silver badges32 bronze badges

Comments

Ren · Accepted Answer · 2017-01-17 10:01:34Z

0

Another approach is to create a class or classes and call them with .addClass() or .toggleClass()

.zindex60 {z-index:60;}

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

answered Jan 17, 2017 at 10:01

Ren

911 silver badge3 bronze badges

Collectives™ on Stack Overflow

jQuery: css z-index not working

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related