Question

En la siguiente serie de DIV traslapados ¿cómo puedo hacer que el primero se muestre hasta arriba de los demás?

div { position:absolute;width:100px;height:100px;border:1px solid #000 }

<div style="top:0;left:0">A</div>
<div style="top:50px;left:0">B</div>
<div style="top:100px;left:0">C</div>

Answer 1

Utiliza el atributo z-index en CSS para ello. Por ejemplo:

<div style="top:0; left:0; z-index: 2;">A</div>
<div style="top:50px;left:0; z-index: 1;">B</div>
<div style="top:100px;left:0; z-index: 1;">C</div>

Con esto ya valdría, el primer elemento tiene un z-index de 2, superior al resto que tienen asignador un z-index de 1. Normalmente asignando un z-index alto al primer elemento es suficiente :)

Answer 2

Como bien te indica dpoquet, debe indicarse explícitamente el z-index del primer div:

<div style="z-index:10;top:0;left:0">A</div>