title: only change z-index of a div and not each of it's children
body: <p>I have a div which is overlapped by another div with a higher z-index. Each div contains similarly layered images. </p>
  
  <p>When I change the z-indexes of the parent divs so that now the other div is on top, I need all their layered children in both divs to remain in their same respective orders as before, but be layered as a group according to their parent's new position.</p>
  
  <p>Right now, to accomplish this, I have to change a div's z-index from 5 to 1, and it's children from 6,7,8 to 2,3,4. AND change the other div's z-index from 1 to 5, and its children from 2,3,4 to 6,7,8.... </p>
  
  <p>How can I change only the div's z-index? It's children will never need to change order relative to the parent div. So it seems like I shouldn't need to set each one every time.</p>
  
  <p>Maybe instead of divs, I should use iframes? </p>