title: How to correctly wait until JavaScript applies inline Css
body: <p>I have this <a href="http://jsfiddle.net/haruosoft/ZLPAX/" rel="nofollow">jsFiddle</a>. When the button is clicked, I want to put the red div behind the black one immediately, then start the animation.</p>
  
  <pre><code>var red = document.getElementById("red");
  var button = document.getElementById("button");
  
  button.addEventListener("click",function () {
      red.style.zIndex = -1;
      red.classList.remove("shifted");
  });
  </code></pre>
  
  <p>However, as you can see, they seem to be occurring as two separate actions. I know I can use <code>setTimeout</code> to wait until the zIndex property is applied, but I do not know how long I am supposed to wait, and the duration perhaps differs from browsers to computers.</p>
  
  <p>Should I create a loop that will check if zindex was applied? But this also sounds like an unintelligent solution. What is the correct way?</p>
  
  <p>EDIT: I do not want to change the zIndex on the black div.</p>