z-index not working in combination with overflow

Question

This image illustrates my problem:

It's a popup-script from Sohtanaka I think, so what you see is a popup-window. The CSS is looking like this:

#fade { /*--Transparent background layer--*/
    display:none; /*--hidden by default--*/
    background:#000000;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity:.80;
    z-index:9999;
}

.popup_block{
    display:none; /*--hidden by default--*/
    background:#ffffff;
    padding:20px;
    border:20px solid #dddddd;
    float:left;
    position:absolute;
    top:50%;
    left:50%;
    z-index:99999;
    /*--CSS3 Box Shadows--*/
    -webkit-box-shadow:0px 0px 20px #000000;
    -moz-box-shadow:0px 0px 20px #000000;
    box-shadow:0px 0px 20px #000000;
    /*--CSS3 Rounded Corners--*/
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    font-size:12px;
    height:625px;
}

img.btn_close {
    float:right;
    margin:-55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
    position:absolute;
}

*html .popup_block {
    position:absolute;
}

And the javascript:

$(document).ready(function(){

    //When you click on a link with class of poplight and the href starts with a # 
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Get Popup Name
        var popURL = $(this).attr('href'); //Get Popup href to define size

        //Pull Query & Variables from href URL
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //Gets the first query string value

        //Fade in the Popup and add close button
        $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="../images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

        //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;

        //Apply Margin to Popup
        $('#' + popID).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        //Fade in Background
        $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 

        return false;
    });


    //Close Popups and Fade Layer
    $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();  
    }); //fade them both out

        return false;
    });         

});

The first picture is when I use the CSS as I linked below. Everything's working, and the close-cross in the upper right is there and working. Problem is, that I have made a fixed height on the popup, and according to the ID linked to the popup window, stuff inside it could be more, and it could be less. So, the fixed height is not always enough, which you can see in the bottom of the first picture, where content is actually going outside the window frame.

Well, then I tried using overflow:auto (I know I should overflow-y for scrollbar in the sides, but the other picture is just with overflow, so bear with me ;)), and I got the other picture. I then get a scrollbar inside the window, and I can easily scroll to see the other content, as it should be (Again, ignore the x-scrollbar). But, unfortunately, not the close-cross-button don't want to show as before, but instead hide behind the borders.

I've tried some things with enclosing the button in the javascript in a div, and then position that, but that didn't seem to work the way I did it.

Answer 1

I found a solution for you. Add a new division inside the popup_block and give overflow to it. Then you can see the close image correctly. I had created two jsfiddle examples. One with less content and other with more content.

Example with more content

Example with less content

I had adjusted some CSS also. Close image added externally.

Hope this will solve your problem.

Cheers !!!