Linuchs: CSS für überlappende Spielkarten

Beitrag lesen

SELF-Forum

CSS für überlappende Spielkarten

Linuchs (Versionen)
– Informationen zu den Bewertungsregeln

problematische Seite

Moin,

habe eine Weile mit den CSS-Möglichkeiten experimentiert.

Eine horizontale Überlappung beliebig vieler <li> Elemente ist möglich mit

float: left;
margin-right: -55px;  // von 75px Breite

Jedes Element kann die Position für das Folge-Element (sibling) links - rechts versetzen. Der Versatz oben-unten wird jedoch auf das Elter-Element (parent) bezogen und ist damit für alle siblinge gleich, also nicht gestaffelt wie gewünscht:

float: left;
margin-right: -55px;  // von 75px Breite
margin-top: 20px;     // wirkt nicht

Die vertikale Überlappung für beliebig viele <li> Elemente geht so:

margin-bottom: -80px;  // von 100px Höhe

Jedes Element kann die Position für das Folge-Element (sibling) oben - unten versetzen. Der Versatz links-rechts wird jedoch auf das Elter-Element (parent) bezogen.

Eine Kombination aus beiden habe ich nicht entdeckt.

Die <li> Elemente sind ja geschlossen und nicht verschachtelt. Mit verschachtelten <div> ist eine Überlappung wie gewünscht möglich:

div {
  position: absolute;
  left: 20px;
  width: 75px;
  top: 20px;
  height: 100px;
  padding: 0;
  background: #eee;
  border: 1px solid #0ff;
}

<body>
  <div>1<br>1<br>1<br>1
  <div>2
  <div>3
  <div>4
  </div></div></div></div>
</body>

Linuchs

Beitrag melden
–
Informationen zu den Bewertungsregeln