0

I want to avoid parent div z-index. Is it possible with any plugin? 

<div id="1"> 
  <div id="2"></div>
</div>

div with id 1 = 950 of z-index

div with id 2 = 1 of z-index but on a click event it's equal to 9999 of z-index.

And i have a popup (exposemask) equal to 9998 of z-index.

What I want to do is to show div with id 2 when popup is active. However, div with id 1 overrides its z-index. Because it's a parent of the div with id 2 and I shouldn't change the z-index of div with id 1.

Unai Vivi
  • 3,073
  • 3
  • 30
  • 46
John
  • 3
  • 1
  • 2
    No it's not possible, and if you keep the right order in your DOM you should (almost) never have to use z-index at all. – adeneo Nov 21 '13 at 14:23
  • Hmm, is'it possible to make div id 2 as a popup in that case, so it will be without any parent div on a click event? – John Nov 21 '13 at 14:29
  • @John you could technically move it out of the parent...but why not place it outside of the parent in the first place? – David Nguyen Nov 21 '13 at 14:35
  • Yes I can technicall do it. But the thing is that div id 2 is a part of zend framework. (And div id 1 is a part of my own framework) Which is all within the div 2. If I il move div 2 outise the div id 1 I will break alot of stuff. It's a last thing what I want to do in that case. – John Nov 21 '13 at 14:44
  • what happens if you have a `
    ` somewhere else, and then when the popup is active, you do `` I mean, this would show the contents of the div#3. This might not require you to move anything, so whenever you call the popup, this call would update the contents.     – Suthan Bala Nov 21 '13 at 14:50

1 Answers1

0

First of all, you can't use numbers as css selectors follow the css grammar

If parent doesn't need a z-index, you can do:

What if you don't give a z-index to the parent div? But just give a negative z-index value to your child element, so it's hidden 'behind' the parent:

z-index: -1;

and whenever the popup is active, you will set a positive(higher z-index as the popup) z-index to the child element:

$('#div2').css('z-index', '2');

jsFiddle example

If your parent always needs a z-index(If this parent element needs to go over a other element with a z-index for example) then it's not possible:

It's not possible. As stated in this topic: z-index between Children and Parents

All child element z-index is calculated in respect to the parent element. So the one of the 2 elements with the higher z-index will be rendered above the other one and all its child elements.

You can however get the child element out of the parent element.

I would also suggest you to just increase the z-index by 1 when neccesary and not use big numbers as 99999. With the big numbers you would not know how much z-indexes you have used.

Community
  • 1
  • 1
nkmol
  • 8,025
  • 3
  • 30
  • 51
  • thx, I know all this stuff. It's just like I'm looking for any chance if it's still possible somehow. Any hack or so. I know, sounds silly, but sometimes things make us to do a crazy shit ;{ – John Nov 21 '13 at 14:54
  • I see. well check my update, i've tryed to make a workaround. However this only work when you parent element does not contain the z-index property. – nkmol Nov 21 '13 at 15:00
  • Yes, it's a good idea. But not in my case. I can't leave my parent div without positive z-index. Thx anyway. I think I ve found an answer. I will need 2 override my own framework with some minor changes. This will give me a chance to move div id 2 out of the parent div id 1. I was hoping i can avoid it somehow. – John Nov 21 '13 at 15:08