problema con eventos en elementod DIVs

[youangelazul]

Hola amigos estoy en esta oportunidad para pedirles que me ayuden con una duda aunque es mas que una duda un error que vengo liando hace oras con JQUERY en la escucha de eventos click en elementos DIV...

primeramente que tengo dos divs:

<div id="capa_inferior">
<div id="capa_superior">
</div>
</div>

a los cuales le asignado su supuestas hojas stylos:

.style_inferior{
position: relative; margin: 0 auto; top: 0; width: 700px;
height: 600px; color: black; background: black;
}

.style_superior{
position: relative; margin: 0 auto; top: 100px; width: 400px;
height: 400px; color: white; background: white;
}

Buena el problema que me surge con estos DIV es a la hora de manipular sus eventos click individualmente iia que cuando le doy click ala elemento id="capa_superior" me realiza todas las instrucciones que le halla puesto dentro de su onclick pero ala misma ves me realiza las instrucciones que estan dentro del otro elemento id="capa_inferior" yo no entiendo porque se lokea mi pagina web en mostrarme instrucciones de un elemento que no hice click si es logico que la capa superior esta por encima del inferior, en cambio cuando hago click en la capa inferior ai si se cumple la logica pero ala inversa no espero me den una manita esto de manipular los eventos lo estoy haciendo desde JQUERY o es que estoy fallando en algo porfis si tengo algun error avisarme no se mucho aun de esto aqui oz dejo el codigo JQUERY...


$(document).ready(
function()
{
$('#capa_inferior').addClass('style_inferior');
$('#capa_superior').addClass('style_superior');

$('div#capa_inferior').click(
function()
{
alert('capa_inferior');
});

$('div#capa_superior').click(
function()
{
alert('capa_superior');
});
});

Graciias de ante mano atte. YouAnGelAzul