Dropdown-Menü verschwindet hinter nächstem Abschnitt
Tourbine66
0 
Rolf B
0 Tourbine66
0 Rolf B
Dropdown-Menü verschwindet hinter nächstem Abschnitt
Tourbine66
Habe ein Dropdown-Menü, das wird auch angezeigt (wenn man es aufklappt). Auf meiner Startseite hab ich darunter einen Abschnitt mit Hintergrundbild, diesen hab ich relativ positioniert, und darauf habe ich einen Container absolut positioniert. Jetzt ist das Dropdown-Menü nicht mehr sichtbar, bzw. verschwindet hinter dem Abschnitt. Das hat irgendwie mit der absoluten und relativen Positionierung zu tun, soweit bin ich schon, aber wie krieg ich es sichtbar??
Wäre super, wenn jemand einen Tip hätte, ich doktor schon eine Weile dran rum...
Das ist der Quelltext
<!-- Header -->
<header>
<div class="row">
<div class="wrapper">
<a href="index.html"><img src="images/logo.svg" alt="SWebdesign"></a>
<nav>
<ul id="navigation">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="ueber.html">Über mich</a>
<ul>
<li><a href="vita.html">Mein Werdegang</a></li>
<li><a href="projekte.html">Meine Projekte</a></li>
</ul>
</li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<div class="clear"></div>
</div>
</div>
</header>
<!-- Hero -->
<section class="hero">
<div class="herocontainer">
<h1>Individuell<br>
Übersichtlich<br>
Responsiv</h1>
<a href="index.html#features" class="button">Was heißt das?</a>
</div>
</section> Quelltext hier
Und so sieht das css zum Heroabschnitt aus
.hero{
width: 100%;
height:620px;
background-image: url(../images/meerwasser2.jpg);
background-size: cover;
text-align: center;
position: relative;
}
.herocontainer{
text-align: center;
background-color: rgba(255,255,255,0.65);
position: absolute;
top: 50px;
left: 35%;
right: 35%;
height: 520px;
}
-
Hallo Tourbine66,
header { position:relative; z-index: 1; }position:relative;erzwingt einen neuen Stapelkontext, so dass z-index anwendbar wird. Angeblich istisolation: isolate;genau dafür da, um Stapelkontexte zu erzwingen, das kannst du mal als Alternative probieren und berichten 😉Mit dem z-index liegt der Stapelkontext des Headers vor dem Default-Stapelkontext des Body. Falls Du auch anderswo rumstapelst, musst Du den z-index ggf. noch anpassen.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
position:relative; z-index: 1;
hat geklappt! Super, vielen herzlichen Dank, ich wäre da im Leben nicht draufgekommen. Habe mir auch das mit den Stapelkontexten mal angesehen, aber noch nicht wirklich verstanden... Die andere Methode mit isolation: isolate; hat nicht funktioniert.Tourbine
-
Hallo Tourbine66,
das Problem ist, dass die Z-Reihenfolge sozusagen ebenenweise bestimmt wird.
<body> <header> <h1>sdfklsdflksd</h1> </header> <main> </main> </body>Hier liegt <main> grundsätzlich über <header>. Mit einem Stapelkontext auf <header> kann ich das beeinflussen, aber ohne diesen liegen beide im Defaultkontext, und <header> und alle seine Kindelemente ohne eigenen Stapelkontext werden von <main> überdeckt.
Das ist etwas, was vielen Webentwicklern nicht klar ist. Ich habe selbst eine Weile gebraucht, um das Konzept zu verstehen. Aber ohne dieses Verständnis bekommt man bei Popup-Elementen ständig das Pop-Under Problem.
Rolf
--
sumpsi - posui - obstruxi-
Ja, das klingt jetzt schon einleuchtend, gut erklärt. Wenn ich es schaffe, das bei anderen Projekten auch anzuwenden, wenn sowas nochmal auftritt, dann hab ich es wirklich vestanden 🙃. Vielen Dank 😊
-
-
-
