Ich habe ein DIV oben fixed positioniert. Nun möchte ich, dass der darunter stehende Content hinter diesem DIV verschwindet, wenn man ihn scrollt. Ich schaffe es leider nur so, dass man den Content scrollt und ihn dann aber im fixed positionierten DIV sieht. Gibt es sowas wie Ebenen oder so?
Content hinter DIV verschwinden lassen
-
-
-
und wieso nimmste da so brutal hohe werte tobse?
als würd man noch weitere 48 tiers nutzen....:D:D -
Hallo,
ZitatNun möchte ich, dass der darunter stehende Content hinter diesem DIV verschwindet, wenn man ihn scrollt.
Dann könnten diese beiden Seiten für dich interessant sein:
http://www.css-technik.de/2004/08/15/fix…-im-seitenkopf/
mit Beispiel
http://www.css-technik.de/css-examples/288_8/menu.html
und
http://intensivstation.ch/files/template…ss-browser.html
Gruss
MrMurphy
-
Ich nehm die werte, weil ich ma grundsätzlich imer davon ausgegangen bin, das alle elemente erstmal 50 haben und dann ihre anordnung im HTML nach abgestuft werden
-
joa ich machs umgekehrt.. 0 is eben die hauptebene, wenn ich was "stapeln" muss mach ichs
-
Hier einmal ein Beispiel. Leider funktioniert es noch nicht 100%ig. Denn ich möchte, dass man den Content beim Hochscrollen gar nicht mehr sieht - jetzt ist er ja noch sichtbar.
Gibt es also eine Möglichkeit den Content verschwinden zu lassen, auch wenn die beiden Div's die gleiche Hintergrundfarbe haben???
Code
Alles anzeigen* { margin: 0; padding: 0; } body { background: #555555; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; color: #ffffff; } .clear { clear: both; } .center { width: 750px; margin: 0 auto; } div#header { z-index: 2; width: 100%; padding-bottom: 50px; border-bottom: 1px solid #777777; position: fixed; top: 20px; } div#header ul { margin: 10px 0 0 0; padding: 0; list-style: none; float: left; } div#header ul li { } div#header ul li a { text-decoration: none; color: #777777; } div#header ul li a:hover { color: #ffffff; } div#header h1 { font-size: 40px; color: #777777; width: 500px; float: right; } div#header h1 span { font-size: 40px; color: #ffffff; } div#content { z-index: 1; width: 100%; position: absolute; top: 200px; } div#content img { margin-bottom: 30px; } div#content h2 { font-size: 14px; margin-bottom: 10px; } div#content p { font-size: 14px; line-height: 20px; text-align: justify; margin-bottom: 10px; }