让两个子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;

转载于:https://www.cnblogs.com/wjx-blog/p/9565932.html