3

I want to make the orange div render above the other divs,

without changing the HTML markup (ie. statically, or dynamically via DOM tree manipulation) and without changing the z-index of the sibling or parent.

I can use any viable solution, JS, CSS or otehrwise (i.e. works in all major browsers)

http://jsfiddle.net/jaSe7/

Given the constraints, it may not actually be possible to do what I want.

UPDATE: See this fiddle for how it should look: http://jsfiddle.net/chippper/jaSe7/1/ however the fiddle wouldn't work for me since it manipulates the DOM.

jdeuce
  • 1,706
  • 3
  • 14
  • 20
  • This is a strange question. You've explicitly set the positioning and z-index of these divs, yet without changing the HTML or the z-indez you want to change the display? Why? – j08691 Jun 27 '12 at 16:31
  • The sibling, parent and child elements are created by a javascript library that I have no control over. The javascript library has the existing z-index rules in place to keep the sibling rendered above the parent, that I can't really change. What I want is to bring the child above the sibling in certain cases, and I just need a way to do that, given the constraints set out by the existing sibling, parent and child elements. The jsfiddle I posted is just a minimum example of the layout problem that I ran into, and I'm looking for ways to get around it. – jdeuce Jun 27 '12 at 16:35
  • Does it matter if the red is above the green? In other words, do all three need to be in a specific order, or does orange just need to be on top of the others and the order of the other two is irrelevant? – j08691 Jun 27 '12 at 16:40
  • Yeah that's kind of the crux of the problem. Basically the green one is above the red in most cases, but there's one specific element (orange) that's a child of the red one that I want to render above everything else. – jdeuce Jun 27 '12 at 16:44

2 Answers2

2

If you can't alter the HTML directly, you will have to do it with JavaScript. You need to move the child out of it's parent in order to get it to index above the sibling div. Something like this in jQuery:

var childHtml = $('#parent').html();
$('#child').remove();
$('#parent').after(childHtml);

See my updated fiddle.

chipcullen
  • 6,840
  • 1
  • 21
  • 17
  • Yes this is one way to possibly do this, but my constraints require me to change the render order without altering the DOM tree. (I applied an edit to make this clearer in the original statement) – jdeuce Jun 27 '12 at 16:41
  • 1
    If you can't manipulate the DOM, then you can't get the child to appear over the sibling. z-index is dictated by sibling elements - a child element is always 'subservient' in terms of z-index. Sorry! – chipcullen Jun 27 '12 at 18:26
  • huh. This must be one of the reasons Twitter Bootstrap attaches tooltips to the bottom of the DOM. – Peter Ehrlich Feb 11 '13 at 18:04
1

Not sure if this is still an issue, but I found this issue:

Z-Index Relative or Absolute?

Buried in the discussion is this comment:

"If you remove the z-index on X in your example, a new stacking context is NOT created and 3 WILL overlap 2" – fionbio Sep 23 '20 at 18:02

So for the above, if you run the fiddle, remove the z-index for the parent element, then the z-indexes will operate as expected. Now if you need z-indexing on the parent element, then I am not sure what the options are.

Robert Dustin
  • 11
  • 3