CSS Frage, Div in Div mit Z-Index

Domi83 · 30. Juli 2013

Hallo Leute, ich habe da mal eine kleine Frage zu den DIV Spielchen und dem Z-Index

Ich habe das eine oder andere schon durchgelesen, aber bekomme es nicht so hin wie ich möchte. Also das Grundgerüst sieht ungefähr so aus...

HTML:

<div id="header">
 <div class="inhalt">
  header
 </div>
</div>

<div id="content">
 <div id="blocka">
  <div class="right">
   right
  </div>
  <div class="main">
   main
  </div>
 </div>
 <div class="skyline"></div>
</div>

<div id="footer">
 <div class="inhalt">
  footer
 </div>
</div>

das alles befindet sich in einem wrapper drin, der für eine zentrierte Ausgabe und eine bestimmte Breite sorgt. Mein Problem ist nun, ich möchte gerne das die Klasse "skyline" über der ID "blocka" liegt. Das realisiert man mit z-index und dem position: absolute, aber sobald ich diesen Parameter verwende reagiert der wrapper oder alle anderen Blöcke nicht mehr auf diesen Inhalt und schieben sich wieder zusammen als wenn noch nichts darin wäre

Wer kann mir denn mal einen Tipp geben, wie ich mein Vorhaben realisieren kann?
Gruß, Domi

Daaron · 30. Juli 2013

Also du willst .skyline absolut innerhalb von #content positionieren, ohne
a) über den #header zu rutschen (<header> wäre übrigens das bessere HTML5-Element)
b) den Wrapper zu manipulieren

Lange Antwort: Alle Positionierungen, insbesondere aber absolute, erfolgen am nächsten nicht statisch positionierten Elternelement. "static" ist das, was du hast, wenn du gar nix angibst. Gibt es nirgendwo ein Elternelement mit z.B. "relative", dann wird vom <html>-Element ausgegangen.

In diesem Sinne, versuch mal
.content {position:relative;}

Domi83 · 30. Juli 2013

Ahhh... ich hab es hin bekommen. Mit dem position: relative hat es scheinbar funktioniert

Der Header an sich ist was anderes, darum ist meine skyline auch im Content und in diesem einen Block drin

Das Resultat sieht ungefähr so aus.

HTML:

div#content {
 position: relative;
}

div#content div#blocka {
 z-index: 1;
}

div#content div.skyline {
 background: url('img/xxx.png');
 bottom: 0;
 min-height: 151px;
 position: absolute;
 z-index: 10;
 width: 900px;
}

<div id="content">
 <div id="blocka">
  <div class="right">
   right
  </div>
  <div class="main">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
  </div>
 </div>
 <div class="skyline"></div>
</div>

Das Ergebnis selbst sieht zwar etwas "speziell" aus, aber wenn das so gewünscht ist, will ich das mal nicht verweigern

Daaron · 30. Juli 2013

Solche Kunden haben wir auch... Wir entwerfen n gutes Layout und die lassen dann so viel daran ändern, dass es am Ende zum Fremdschämen einlädt.

Suche

CSS Frage, Div in Div mit Z-Index

Domi83

Rear Admiral

Daaron

Fleet Admiral

Domi83

Rear Admiral

Daaron

Fleet Admiral

Ähnliche Themen