Keskustelu: Nettisivujen teko: CSS: 2 tai useampi kuva päällekkäin

Olen tekemässä rpg:tä php:lla, ja pitäisi tehdä jonkunlainen asuste-systeemi.

Toteutan sen niin, että oletushahmon kuvan päälle tulee esim takki, hattu, miekka erillisinä kuvina, joiden taustat vain ovat läpinäkyvät. Näin syntyy illuusio, että hahmo pitää asusteita päällään.

En kuitenkaan löytänyt tapaa, millä saan saman divin sisällä olevat kuvat päällekkäin. Kaikkien kuvien koko on 60x90.

Osaatteko auttaa?

Luo useampi div päällekäin.

Kiitos.

Mihinkä niitä divejä nyt tarvitaan?

<div class="character">
  <img class="eq-hat" alt="Hat"/>
  <img class="eq-shirt" alt="Shirt"/>
  <img class="eq-pants" alt="Pants"/>
  <img class="eq-tool-left" alt="Left-hand tool"/>
  <img class="eq-tool-right" alt="Right-hand tool"/>
</div>

Divillä olisi taustakuvana kokonainen ukkeli ja nuo kuvat sitten edustaisivat jokainen erillistä "varustetta". Kuvat voi positioida absoluuttisesti hahmon divin sisällä mihinkä sitten halutaankaan..

Tai jos ei tahdo olla absolutisti, niin voi vetää voittonsa marginaaleista.

div {
  border: 1px solid black;
  display: inline-block;
  font-size: 0;
}

div > img ~ img {
  margin-left: -60px;
}