Ti posto un codice che ho usato più volte
codice:
<script src="http://code.jquery.com/jquery-latest.js"></script><script>
$(document).ready(function() {
    $('.button_slider').click(function() {
        var $lefty = $('#slider');
        $('div.overlay').fadeIn(200);
        $lefty.animate({
          right: parseInt($lefty.css('right'),10) == 0 ? 
            -$lefty.outerWidth() : 0
        });
      });
      
      $('div.overlay').click(function(){
            var $lefty = $('#slider');
          $lefty.animate({
          right: parseInt($lefty.css('right'),10) == 0 ? 
            -$lefty.outerWidth() : 0
        });
        $('div.overlay').fadeOut(200);
      });
});
</script>


<style>
.button_slider{
    padding:10px;
    background:#333;
    color:#fff;
}
#slider {
    background:#333;
    font-family: Arial, Helvetica, sans-serif;
    height: 175px;
    margin: 15px 0 0 0px;
    padding: 70px 20px 0; /* top right bottom left */
    margin-top:40px;
    top: 0;
    width: 200px;
    position: fixed;
    z-index:+2;
    right: -250px;
    border:1px solid #fff;
    color:#fff;
}
div.overlay{
    background:#000000;
    opacity:0.6;
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    z-index:+1;
    display:none;
}
</style>


<a href="#" class="button_slider">newsletter</a>


<div class="overlay"></div>


<div id="slider" >
    TEXT
</div>
Vedrai che ho settato lo z-index soltanto all'overlay e alla div che deve comparire, così tutto il body e gli altri elementi hanno di default z-index:0;
Il codice è semplice ma se ti servono chiarimenti dimmi pure