jquery closing overlay on both outer AND inner clicks?

I'm puzzled by something, thought someone here might have insight.

I've built a simple overlay, but it's not working as expected. Here's the css:

    #overlayOuter {
        display: none;
        position: absolute;
        height: 100%;
        width: 100%;
        background: #000;
        z-index: 100;
        }
    #overlayInner {
        position: absolute;
        top: 100px;
        left: 200px;
        width: 600px;
        height: 400px;
        z-index: 101;
        }

The html is simple:

    Blahblahblah!
    <a href="#" onclick="$('#overlayOuter').show();return false;">show overlay</a>
    <div id="overlayOuter">
        <div id="overlayInner">
            Oyeah? Blahblah!
        </div>
    </div>

I then wanted jquery to close the overlay when someone clicked on overlayOuter but not the overlayInner box (so I could include forms and such).

The first jquery I was expecting to work was ...

    $('#overlayOuter').click(function() {
        $('#overlayOuter').fadeOut('fast');
    });

... which works but strangely also closes when clicking overlayInner! Any forms, etc. are now useless!

The following does work as desired ...

    $('#overlayOuter').click(function(e) {
        if ($(e.target).parents('#overlayInner').length==0) {
            $('#overlayOuter').fadeOut('fast');
        }
    });

... but WTF!! Shouldn't the first one work? Isn't the z-index enough to mask overlayInner separate from overlayOuter?

You're nesting the elements, so when you click the inner div, you're still clicking the outer.

you need to separate them like this:

<div id="overlayOuter">
</div>
<div id="overlayInner">
</div>

Not a problem with layout here that way, since you did set the position to absolute anyway

Here's the updated jfiddle from Stack 101s initially built one http://jsfiddle.net/Dapuc/3/

This is due to Javascript event propagation/bubbling. Events that take place on an element will also take place on the elements containers. To avoid this, check that event.target is the element you want, like in this demo: http://jsfiddle.net/WQS3V/

The first one does work :

http://jsfiddle.net/Dapuc/1/

You can add this:

$('#overlayInner').click(function(e) {
  e.stopImmediatePropagation();
});