37

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.

Danny Postma
  • 389
  • 1
  • 3
  • 8

6 Answers6

98

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);
Luc125
  • 5,752
  • 34
  • 35
  • Indeed... Does the problem occur on all browsers, or just one? – Luc125 Nov 20 '11 at 14:02
  • 1
    Both Safari and Chrome have the same problem. – Danny Postma Nov 20 '11 at 14:03
  • Your trick works indeed! Made a way around the problem and just changed the water it's z-index. Thanks alot! – Danny Postma Nov 20 '11 at 14:35
  • Just as a note to anyone as stupid as myself; I was writing in the wrong line (selector) and setting `z-index` to the body rather than the element I wanted. I should have clicked when I saw the body keep showing a 2147483647 `z-index`. Oh well. – William Isted May 04 '16 at 07:59
  • As of 2017 this was the correct reasoning for why I was having difficulty in Chrome. Added `relative` position and it worked fine. – Erutan409 Nov 15 '17 at 16:54
7

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

Use either zIndex or "z-index".

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
6
$(this).parent().css('z-index',3000);
Utku Yıldırım
  • 2,277
  • 16
  • 20
0

because your jQuery code is wrong. Correctly would be:

var theParent = $(this).parent().get(0); 
$(theParent).css('z-index', 3000);
adrian7
  • 986
  • 12
  • 35
  • This for some reason doesn't work either. Nothing is changing. – Danny Postma Nov 20 '11 at 13:48
  • Try checking theParent variable, if it is the HTML node object you are looking for. Also you might consider jsbin.com or some other service to show us exactly what is going on. – adrian7 Nov 20 '11 at 15:51
0

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

  • well, I read it somewhere. though, `$("body").css("borderRight","thin solid black");` and `$("body").css("border-right","thin solid red");` both works so I think `zIndex` and `z-index` should too. –  Nov 20 '11 at 13:49
  • combine above comment with last line in answer and voila! –  Nov 20 '11 at 13:52
  • Doesn't fix the problem for me. I added the site where the problem occurs. Hope that may help. – Danny Postma Nov 20 '11 at 13:53
  • port1 has parent= port? what div should i click? and what div should have got changed? –  Nov 20 '11 at 14:03
  • Clicking the portfolio ball drops 2 balls. When you hover these, two balls appear. When clicking the right one, the ball sinks and becomes bigger. The problem I have is in the same part of the code. Though it should select the parent correctly because it sinks the ball too. – Danny Postma Nov 20 '11 at 14:05
-1

z-index must be Integer. So try to use parseInt(): $element.css({"z-index", parseInt(z)});

alexader25
  • 1