• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV soll über Parent-DIV raus ragen

A

AlexK

Neues Mitglied
Hallo!

Ich habe auf einer Seite ein DIV names "Header". Im "Header" soll ein weiterer DIV ("Menu") sein, der ein Menu beinhaltet. Dieses Menü klappt nach unten hin aus.
Der Header steht immer ganz oben:

#Header
{
position:absolute;
left:0px;
top:0px;
height:50px;
width:100%;
border-bottom:solid 1px red;
}

#Header#Menu
{
position:relative;
left:20px;
top:0px;
width:300px;
border:dotted 1px green;
background-color:Yellow;
z-index:800;
}

Das "Menu" kann aber größer als 50px sein. Wie erreiche ich es, dass das "Menu" dann über den "Header" hinaus ragt.
Ich hoffe ich hab mein Problem verständlich beschrieben.

Vielen Dank für eure Tipps!
Alex
 
Bei mir funktioniert es...

Aber das mit dem z-index lass mal weg. Kein Element kann einen höheren z-index haben als sein Elternelement.

EDIT:
Hab dein Problem erst nicht richtig verstanden :) Zeig doch mal den Quelltext für dein Ausklappmenü...
 
Zuletzt bearbeitet von einem Moderator:
Hallo und danke für deine schnelle Antwort!

Das Ausklappmenü hab ich noch nicht. Die Seite soll so aufgebaut sein, dass direkt unter dem "Header" (inkl. "Menu") der Bereich für den Content kommt. Dafür hab ich noch einen DIV-Container ("MainContent"):
HTML: 
#MainContent
{
 position:absolute;
 left:0px;
 top:51px; /* = Höhe vom Header + 1px */
 width:100%;
 background-color:Aqua;
 z-index:500;
 overflow:auto;
}
und der ist dann über dem "Menu"... darum hatte ich z-index drinnen... :sad:
 
... deine komplette TESTSeite sieht dann so aus:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#Header
{
position:absolute;
left:0px;
top:0px;
height:50px;
width:100%;
border-bottom:solid 1px red;
}
#Header #Menu
{
position:relative;
left:20px;
top:0px;
width:300px;
border:dotted 1px green;
background-color: yellow;
z-index:600;
}
#MainContent
{
 position:absolute;
 left:0px;
 top:51px; /* = Höhe vom Header + 1px */
 width:100%;
 height:500px;
 background-color:Aqua;
 z-index:500;
 overflow:auto;
}
</style>
</head>
<body>
<div id="Header">
<div id="Menu">
test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
</div>
</div>
<div id="MainContent">
bli bla blub
</div>
</body>
</html>
 
Warum positionierst du die überhaupt absolut? Es reicht doch, wenn du eine Höhe für die Container angibst. Kann das Menü nicht auch außerhalb des Headers stehen? Brauchst du den Header dann überhaupt?
Mir erscheint das alles etwas undurchdacht. Du hast noch kein Menü, meinst aber, dass du damit ein Problem hast - vielleicht solltest du dir erst einmal Gedanken dazu machen, wie denn das Menü (quelltexttechnisch) aufgebaut wird. Vielleicht sieht dann alles schon ganz anders aus.

EDIT: Auch dein zweiter Quellcode funktioniert bei mir (siehe Link oben) so, wie du es wolltest - der gelbe Bereich überdeckt alles...
 
Das ganze wird eine recht aufwendige ASP.NET Anwendung. In den "Header" soll ein Logo rein und eben das Menü. Das Menü hab ich zwar noch nicht, aber das wird eine UL-Liste.
Im "MainContent" soll dann der gewählte Menüpunkt angezeigt werden.

Du hast dir das im Firefox angeschaut, oder?! Schau es dir mal mit dem IE an...

Danke für deine Tipps!
Alex
 
Die z-index-Reihenfolge ist #Menu --> #Header --> #MainContent.

Da das Menu jedoch größer ist als der Header, brauchst du noch overflow.

overflow: visible;

zum #Menu dazu, fertig.

Das ganze sieht dann so aus:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#Header
{
position:absolute;
left:0px;
top:0px;
height:50px;
width:100%;
border-bottom:solid 1px red;
z-index: 550;
overflow: visible;
}
#Menu
{
position:relative;
left:20px;
top:0px;
width:300px;
border:dotted 1px green;
background-color: yellow;
z-index:600;
}
#MainContent
{
 position:absolute;
 left:0px;
 top:51px; /* = Höhe vom Header + 1px */
 width:100%;
 height:500px;
 background-color:aqua;
 z-index:500;
 overflow:auto;
}
</style>
</head>
<body>
<div id="Header">
<div id="Menu">
test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
</div>
</div>
<div id="MainContent">
bli bla blub
</div>
</body>
</html>
 
@ Efchen:
In der Liste meiner Erfahrungen. Ich wollte nämlich genau das erreichen - ein Element sollte absolut positioniert hinter das Elternelement geschoben werden (auch ohne Positionierung geht es nicht). Du darfst es gerne ausprobieren - bei mir funktioniert es jedenfalls nicht. Eventuell steht es ja im CSS-Standard, das weiß ich aber nicht.

EDIT: @AlexK: IE8 kann es, IE7 wohl nicht.
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben