css 多个盒子在同一位置显示（最大div在下面--中间div在中间--最小div在上面）

1 html

   <!-- 地图 -->

        <div class="top-middle-map">

          <div class="map1"></div>

          <div class="map2"></div>

          <div class="map3"></div>

          <div class="chart">地图模块</div>

        </div>

2 css

.top-middle-map{

  height: 7rem;

  border: 1px solid #2196f370;

  position: relative; //父元素相对定位

}

.top-middle-map .map1{

  width: 5rem;

  height: 5rem;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

  background: url(../../img/big/map.png);

  background-size: 100% 100%;

  opacity: .3;

}

.top-middle-map .map2{

  width: 6rem;

  height: 6rem;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

  background: url(../../img/big/lbx.png);

  background-size: 100% 100%;

  animation: rotate1 16s linear infinite;

}

.top-middle-map .map3{

  width: 5.6rem;

  height: 5.6rem;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

  background: url(../../img/big/jt.png);

  background-size: 100% 100%;

  animation: rotate2 16s linear infinite;

}