Question

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.

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