CODEWITHSUNDEEP
htmlcssz-index
jdeuce
jdeuce

Reputation: 1866

HTML stack a child element above the sibling of it's parent, which has been z-index'd above the parent

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.

Upvotes: 3

Views: 2846

Answers (2)

Robert Dustin
Robert Dustin

Reputation: 11

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.

Upvotes: 1

chipcullen
chipcullen

Reputation: 6960

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.

Upvotes: 2

Related Questions