讓兩個子div重疊在一起的實現

需求：

　　需要添加兩個div，鼠標未移上是顯示第一個，鼠標移上后，顯示出來第二個半透明的。這兩個div在同一位置上。

實現：

第一步：最外面包圍的div

Html代碼：

<div class="Main">

</div>

CSS代碼：

    .Main{
        width: 220px;
        height: 120px;
        float: left;
        position: relative;
        padding: 5px 5px;
    }

第二步：正常一直顯示的div

Html代碼：

<div class="defaultDiv">

CSS代碼：

    .defaultDiv {
        width: 100%;
        z-index: 999;
        position: absolute;
        float: left;
        left: 0;
        top: 0
    }

第三步：鼠標移上后半透明顯示的div

Html代碼：

<div class="hoverDiv"></div>

CSS代碼：

    .hoverDiv{
        background-color: rgba(220,38,38,0.5);
        width: 100%;
        z-index: 1000;
        position: absolute;
        float: left;
        left: 0;
        top: 0;
        visibility:hidden;
    }

 總結：

　　父div上面使用         float: left;  position: relative;

　　子div上使用：        position: absolute; top:0px; left:0px; float: left;