CSS für überlappende Spielkarten bearbeitet von Linuchs 24.03.2017 18:36 Moin, habe eine Weile mit den CSS-Möglichkeiten experimentiert. Eine horizontale Überlappung beliebig vieler `<li>` Elemente ist möglich mit ~~~css 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: ~~~css float: left; margin-right: -55px; // von 75px Breite margin-top: 20px; // wirkt nicht ~~~ Die vertikale Überlappung für beliebig viele `<li>` Elemente geht so: ~~~css 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: ~~~css div { position: absolute; left: 20px; width: 75px; top: 20px; height: 100px; padding: 0; background: #eee; border: 1px solid #0ff; } ~~~ ~~~html <body> <div>1<br>1<br>1<br>1 <div>2 <div>3 <div>4 </div></div></div></div> </body> ~~~ Linuchs
CSS für überlappende Spielkarten bearbeitet von Linuchs 24.03.2017 18:42 Moin, habe eine Weile mit den CSS-Möglichkeiten experimentiert. Eine horizontale Überlappung beliebig vieler `<li>` Elemente ist möglich mit ~~~css 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: ~~~css float: left; margin-right: -55px; // von 75px Breite margin-top: 20px; // wirkt nicht ~~~ Die vertikale Überlappung für beliebig viele `<li>` Elemente geht so: ~~~css 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. Linuchs
CSS für überlappende Spielkarten bearbeitet von Linuchs 24.03.2017 18:37 Moin, habe eine Weile mit den CSS-Möglichkeiten experimentiert. Eine horizontale Überlappung beliebig vieler `<li>` Elemente ist möglich mit ~~~css 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: ~~~css float: left; margin-right: -55px; // von 75px Breite margin-top: 20px; ~~~ Die vertikale Überlappung für beliebig viele `<li>` Elemente geht so: ~~~css 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. Linuchs
nicht angemeldet nicht angemeldet
