javascript - Can't change z-index with JQuery

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