1

index and im having a problem. i have this button that when click, it will show to content but it does not overlap the div in front if it i have also tried to set its z-index on click here is my code so far

<script type="text/javascript">
function change()
{
    alert("Asd");
    $('#account-container').css('z-index', 11);
}

and here is what it looks like enter image description here

any idea on what i should do? thanks so much

Matt Komarnicki
  • 5,198
  • 7
  • 40
  • 92
BourneShady
  • 955
  • 2
  • 17
  • 36
  • Content which is overlapped should have higher `z-index` – Rayon May 31 '16 at 04:07
  • Try putting the `account-container` html after the current html. If I suppose your `account-container` is your popup. – Akash Amin May 31 '16 at 04:07
  • check the z-index of the content div.. it might be higher than the signout widget. If not try setting z-index:-1 to the content widget – Santhosh Kumar May 31 '16 at 04:08
  • Please post the relevant HTML code which produces the problem, or research "stacking context" a bit more. Zindex only positions elements behind/infront of elements in the __same stacking context__. – traktor May 31 '16 at 05:02

4 Answers4

8

Higher z-index is not enough. Both elements must have position defined and it should be absolute and / or relative.

I would go with relative for parent and absolute for child (then also use top / left to position). Next play with z-index for both, where higher value is for the child (or the layer that must be on top).

In most cases z-index should go together with position but not always. Thanks to Michael_B for pointing that out.

Community
  • 1
  • 1
Matt Komarnicki
  • 5,198
  • 7
  • 40
  • 92
2

Few pointers:

  • z-index only works within a particular context i.e. relative, fixed or absolute position.

  • z-index for a relative div has nothing to do with the z-index of an absolute or fixed div.

  • z-index doesn't work on static positioned elements(there are exceptions in CSS3).

Ani Menon
  • 27,209
  • 16
  • 105
  • 126
1

Content which is overlapped must have higher z-index value. can you put your code to jfiddle. so that I can help you

Prakash Bhandari
  • 549
  • 8
  • 16
1

Refer the below link. This should help you: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_zindex_div

Himalaya Gupta
  • 55
  • 5