css 两个div叠加放置

css：

.bigDiv{
    position: relative;
}
.smallDiv1{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: pink;
    z-index: 2;
}
.smallDiv2{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
    z-index: 1;
}

html：

<input type="button" value="切换" id="btn">
<div class="bigDiv">
    <div class="smallDiv1"></div>
    <div class="smallDiv2"></div>
</div>

js：显示叠加的效果，也可忽略

<script>
    $(function(){
        $("#btn").click(function(){
            $(".smallDiv1").toggle();
        })
    })
</script>

注意：

1、子绝父相：儿子绝对定位，父亲相对定位

2、z-index：层次；值越大放置越靠上