jQuery的遮罩层定位

最近做了一个遮罩层的东东，把定位小整理了一下

东东类似如下：

                

                      图1                                                                   图2

点击某个按钮，弹出层绿色的图，同时出现遮罩层。

1、遮罩层绝对定位，写在wrap的外面：

#draw{ width:100%; height:100%; position:absulute; top:0px; left:0px; background:rgba(0, 0, 0, 0.7); display:none;}
#imger{ position:absolute; top:100px; left:400px; display:none}

2、点击某个按钮，Jquery代码：

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("#draw,#imger").fadeIn();
        });
    });
</script>

3、优化：

a、draw框的大小只能是屏幕大小，向下拉动长度不够，改变代码如下：

#draw{ position:fixed;}

b、imger不能随着屏幕滚动，改变代码如下：

#{ position:fixed; bottom:40%;}

想了解更多关于position的请看， position那点事儿