Content hinter DIV verschwinden lassen

davidos_no.1

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?

Tobse

JeP, der content bekommt CSS

Code

z-Index: 49;

und der Div

Code

z-Index: 50;

synaptic

und wieso nimmste da so brutal hohe werte tobse?
als würd man noch weitere 48 tiers nutzen....:D:D

MrMurphy

Hallo,

Zitat

Nun 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

Tobse

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

synaptic

joa ich machs umgekehrt.. 0 is eben die hauptebene, wenn ich was "stapeln" muss mach ichs

davidos_no.1

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

* { 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; }

Alles anzeigen

Tags