Heute erkläre ich Ihnen, wie man einen Container ein Image oder was auch immer aus dem Hintergrund in den Vordergrund bringen kann.
Ich nehme mal einfach folgendes Beispiel: Zwei div Container mit unterschiedlichen Hintergrundfarben.
Beispielcode:
<html>
<body>
<div style="background-color: #ff0000; position: absolute; top: 100; left: 100; width: 200px; height: 200px;"> </div>
<div style="background-color: #00ff00; position: absolute; top: 150; left: 150; width: 200px; height: 200px;"> </div>
</body>
</html>
Sie werden ein günes Kästchen im Vordergrund und ein rotes im Hintergrund sehen:
Um nun beide DIV-Container miteinander zu vertauschen und das hintere in den Vordergrund zu bringen, verwenden wir den z-index. Der Container mit dem höchsten z-index ist im Vordergrund zu sehen.
Beispielcode:
<html>
<body>
<div style="background-color: #ff0000; position: absolute; top: 100; left: 100; width: 200px; height: 200px; z-index: 2;"> </div>
<div style="background-color: #00ff00; position: absolute; top: 150; left: 150; width: 200px; height: 200px; z-index: 1;"> </div>
</body>
</html>
Das Ergebnis wird nun folgendermaßen aussehen:
Tauschen Sie nun die Werte des z-Index wieder aus und der erste Container ist wieder im Hintergrund.
No related posts.
Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.
[...] [...]
Like or Dislike:
0 
2
warum machst du das direkt im div?
lager doch besser den style in eine css aus.
Habe dir einen Trackbag geschickt zu einem ähnlichen Thema auf meinem Blog
Like or Dislike:
0 
0
Ich möchte erstmal den blutigen Anfängern das klarmachen. Hatte auch zuerst vor, das ganze auszulagern, aber ich denke mal, daß diejenigen, die mit CSS fast gar keine Erfahrung haben, das auf diese Art leichter verstehen.
Like or Dislike:
2 
0
Das verstehe ich. Aber ich denke das wenn man den Anfängern das ganze direkt richtig erklärt, von wegen Auslagerungen der css dateien, die es auch verstehen werden.
Hintergrund dafür, was glaubst Du wie ein Anfänger mit dem Quelltext klar kommt, wenn alles direkt geregelt wird. Ist net bös gemeint, aber die suchen sich dann nen Wolf warum float:left neben einem rechts gefloateten elememt nicht da sitzt wo es soll.
Desweiteren weisst du auch selber das “divs” ihren eigenen Kopf haben…..
Like or Dislike:
0 
0
Ich gebe Dir bei anderen Tuts 100% recht, bin aber dennoch der Meinung, daß jeder (auch der, der von CSS überhaupt keine Ahnung hat), sobald er mit dem Balken hin und herscrollt in diesem Beispiel sofort und auf einem Blick den Unterschied erkennt. Bei zwei entscheidenden Zeilen, ohne sich dabei “nen Wolf zu suchen”.
Mal ehrlich: Ich habe jetzt zwei wichtige Zeilen direkt untereinander.
Direkt zu vergleichen.
Wenn ich jetzt anfange, das ganze zu spitten in: HTML und CSS.
Vergebe dann zwei IDs und eine Klasse. Das Ganze wird letztenendes für dieses Mini-Beispiel unübersichtlicher. Mit Klassen, IDs, CSS-Auslagerung usw. kann man sich in anderen Tutorials noch ausgiebig auseinandersetzen. Da wird auch noch einiges kommen. Aber hierfür ist es overdone. Ich möchte es für denjenigen, der es nicht kann (und um die geht es) so einfach wie möglich machen. Kleine Steps.
Like or Dislike:
1 
0
OK, bei diesem zweizeiler ja, sobald es aber dann an die gesamte Anpassung einer Homepage geht, sollte man auslagern, und das ist das wovon ich die ganze Zeit rede.
Ich werde auf jeden Fall weiter dabei sein. Wenn es mir gestattet ist
Like or Dislike:
0 
0
Bei größeren Geschichten MUSS ausgelagert werden. Ist schließlich der Sinn von CSS, daß man mit der Änderung einer einzigen Datei das Layout eines kompletten Webprojektes ändern kann.
Hier ist jeder willkommen.
Like or Dislike:
0 
0