Хочу добавить плавующие облака нада картой Leaflet, но div не отображается с свойством css. Как правильно интегрироваить отдельный div над Leaflet?

@keyframes anim {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 3504px
  }
}

.clouds {
  display: flex;
  position: absolute;
  width: 3840px;
  height: 3024px;
  transition: all 0.5s ease;
  background: url('clouds.png');
  background-size: cover;
  animation: anim 90s linear infinite;
}

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="js/main.js"></script>

<div id="map">
  <div class="clouds"></div>
</div>