title: Setting z-index on dynamically created DOM elements
body: <p>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.</p>
  
  <p>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 <code>z-indexes</code> accordingly, to make sure te last clicked is on top. </p>
  
  <p>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), <strong>higher z-indexes elements do not appear on top of the page, even though ChromeDevTools indicates that they have the higher z-index.</strong> </p>
  
  <p>This is a css mystery to me.</p>
  
  <p>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. </p>