Bilder mit CSS-Positionierung in allen vier Ecken platzieren

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Es kann ein sehr cooler Effekt sein, Bilder zu haben, die sich in den vier Ecken Ihrer Webseite einnisten. Sie können diese Positionierung mit CSS ziemlich einfach erreichen, ohne andere Seiteninhalte zu beeinträchtigen. Sie können auch auswählen, welche Ecken Sie verwenden möchten, wenn Sie nicht alle vier verwenden möchten. Hier ist die grundlegende Theorie

#upper_left {
	position: absolute;
	top: 0;
	left: 0;
}
#upper_right {
	position: absolute;
	top: 0;
	right: 0%;
}
#lower_left {
	position: absolute;
	bottom: 0%;
	left: 0;
}
#lower_right {
	bottom: 0%;
	right: 0%;
	position: absolute;
}

allfourcorners.png

[LIVE-BEISPIEL]

[BEISPIEL HERUNTERLADEN]