So kehren Sie die Reihenfolge verschachtelter untergeordneter Elemente um

Question

Oct 18, 2013, 06:47 PM

So kehren Sie die Reihenfolge verschachtelter untergeordneter Elemente um

Angenommen, ich habe den folgenden HTML-Code

HTML

<div class="a">
  <div class="b">
   <div class="c"></div>
  </div>
</div>

CSS

.a, .b, .c {
  width: 100px;
  height: 100px;
  position: relative;
}

.a {
  background: red;
   z-index: 999;
}

.b {
  background: green;
   margin: 40px;
   z-index: 500;
}

.c {
  background: gray;
  margin: 40px;
  z-index: 100;
}

Jetzt möchte ich, dass es genau das Gegenteil ist, das heißt, obendrein rot. Ich habe versucht, Z-Index mit Position auf zu verwendenrelative aber es geht nicht. Hier ist diejsfiddle Demo