Bueno, la página a la que nos refieres no está hecha con divs sino que es una gran tabla (<table>) y tiene tabla dentro de tablas.
Lo que ves como una "capa roja" es una tabla que está dentro de una celda de otra tabla, nada impresionante la verdad.
Y encima las "esquinas" no son esquinas, sino celdas que tienen una imagen con fondo negro y frente rojo y el rojo es el que tiene la forma de la esquina redondeada dibujadas. Puedes observar que el texto de la "capa roja" no invade el espacio que está con fondo negro, eso es porque el texto está en la celda del medio de la tabla.
La verdad que encontraste un mal ejemplo para demostrar lo que quieres hacer
.
Ahora bien, respondiendo tu pregunta sobre superponer divs, hay varias formas de hacerlo pero creo que lo que quieres es esto:
<div style="background-color: red; width: 300px; height: 300px;">
<div style="position: relative; background-color: #00cc00; width: 300px; height: 300px; top: 10px; left: 10px;">
Este es el div de arriba.
</div>
</div>
Usé "style" pero bien puedes poner esas propiedades como una class en CSS.
Sobre esquinas redondeadas.
Hasta antes de la versión 3 del CSS había que hacer cosas ridículamente complicadas para obtener esquinas de diferentes formas. Una de ellas es la que ves en la página que nos has referido: tablas. Otras (que yo usaba hasta hace poco) implica poner divs muy precisos en las esquinas del div que quieres "redondear" y usar el bullet del tag <li> para crear la esquina. Otra podría ser poner una imagen background del mismo tamaño que el div que tuviera dibujadas las equinas que quisieras y el fondo de la imagen del mismo color que el fondo de la página.
Como ves, es bastante complicado de hacer.
Pero con la versión 3 de CSS ya lo puedes hacer simplemente especificándolo:
.midiv {
border-radius: 5px;
}
Eso pone al div con las cuatro esquinas redondeadas con un radio de 5 píxeles. Pero puedes especificar esquina por esquina:
.midiv {
border-radius: 5px, 10px, 15px, 20px;
}
Lamentablemente esto no funciona en IE (ninguna versión por ahora, esperemos que la versión 9 sí lo haga). Y para FireFox es lo mismo pero hay que anteponer -moz- :
.midiv {
border-radius: 5px, 10px, 15px, 20px;
-moz-border-radius: 5px, 10px, 15px, 20px;
}
Las últimas versiones de Chrome, Opera y Safari soportan esta propiedad. Las anteriores no.
