2

I have an app where some DOM content are generated by javascript as users interacts. It's actually chatWrappers that can fade in/out as user click on it.

So I basically have various chat bubbles all around the page and everytime my user clicks on one, It updates an array of jQuery objects based on the order they were clicked, and it dynamically sets all z-indexes accordingly, to make sure te last clicked is on top.

The code works for elements that are present on the pageload. But when other chatBubbles are created dynamically (its actually other users asking to join an event, allowing them to chat with the host), higher z-indexes elements do not appear on top of the page, even though ChromeDevTools indicates that they have the higher z-index.

This is a css mystery to me.

The only way to make it work is to set all z-index to 0 except the last one clicked. But it causes another css bug.

Radioreve
  • 3,173
  • 3
  • 19
  • 32

1 Answers1

2

Z-index only works for elements that also have the css rule "position:xxxxx;" (Can be either absolute or relative)

See the explanation here.

An element can have position:relative without actually having to shift its position. If you don't use top, left, right or bottom in your css the position:relative will not do anything to the element's position except make the z-index property work.

It is possible some browsers, like chrome, try to make z-index work without a position property but this behaviour can differ between browsers.

user1884155
  • 3,616
  • 4
  • 55
  • 108
  • It is possible the parent elements of the chat bubbles have no or other z-index properties, and thus this mixes up things. See this post: http://stackoverflow.com/questions/9377029/z-index-in-css-doesnt-work (although not the accepted answer) – user1884155 Oct 04 '14 at 12:55
  • didn't help :( I repeat the problem only appears with dynamically generated elements. If i refresh browser, the same elements will appear on top of the z-index stack with no problem! – Radioreve Oct 05 '14 at 10:20
  • Try the same page in different browsers. Is the result consistent? If it is not, it could be a problem in Chrome's rendering engine – user1884155 Oct 05 '14 at 11:10
  • for those who can not find solution, please try below link. It may help! https://stackoverflow.com/questions/12090191/set-the-z-index-value-of-a-jquery-autocomplete-input-a-level-above-the-result-li/12131428 – chatay Mar 23 '20 at 18:19