Can't change z-index with JQuery

问题

I, for some reason, can't change the zIndex of an element using jQuery. I've searched all of this website and Google but couldn't find the right answer. I am trying to put my element in front of another div when clicking a button. I used the code you can see under here. But didn't work.

  $(this).parent().css('zIndex',3000);

CSS code of elements it's under in the begin:

#wall{
    width:100%;
    height:700px;
    position: absolute;
    top:500px;
    background: #11c1e7;
    opacity: 0.6;
    z-index: 900;
    }

CSS code of element that should go above this:

.port1 {
width:200px;
height:200px;
left:<?php echo rand(1,1000); ?>px;
top:-500px;
border-radius: 500px;
background:red;
position:absolute;
z-index: 10;
}

Does anyone know how I can fix this?

// Edit

Link to the site: http://dannypostma.com/project/j.php

When clicking the portfolio ball, two balls drop from the air. These should go in front of the water when clicked.

回答1:

Setting the style.zIndex property has no effect on non-positioned elements, that is, the element must be either absolutely positioned, relatively positioned, or fixed.

So I would try:

$(this).parent().css('position', 'relative');
$(this).parent().css('z-index', 3000);

回答2:

That's invalid Javascript syntax; a property name cannot have a -.

Use either zIndex or "z-index".

回答3:

$(this).parent().css('z-index',3000);

回答4:

because your jQuery code is wrong. Correctly would be:

var theParent = $(this).parent().get(0); 
$(theParent).css('z-index', 3000);

回答5:

zIndex is part of javaScript notation.(camelCase)
but jQuery.css uses same as CSS syntax.
so it is z-index.

you forgot .css("attr","value"). use ' or " in both, attr and val. so, .css("z-index","3000");

来源：https://stackoverflow.com/questions/8201855/cant-change-z-index-with-jquery

标签

javascript

jquery

z-index