# Divs überlappen. Kein Erfolg mit z-index ?!



## angelikamorgan (16. Juni 2008)

Hallo zusammen,

die folgende Grafik bzw. Seite (s.h. Anhang) besteht aus drei Teilen. 
Den obersten Teil (<div id="header">) habe ich grün markiert.
Den mittleren Teil (<div id="middle">) gelb und den unteren Teil (<div id="bottom">) blau.

Innerhalb des mittleren Bereichs soll die Navigation (roter Kasten) weiter nach oben an die 'position 2' versetzt werden.
Ich habe versucht das Problem mit 'z-index' und 'position-relative' zu lösen. Mir gelingt es nicht, den Kasten an die 'position 2' zu verschieben. 

Wäre super, wenn mir jemand damit weiter helfen könnte. 

Gruß
Angeliak

p.s.: Den Quelltext habe ich auch als Anhang eingefügt.


----------



## Grille (16. Juni 2008)

hallo .. du musst der Positionsangabe auch noch einen wert der position übergeben:


```
#navigation {
 position:relative; top:-200px; left:240px;
 background-color: red;
 width: 240px;
 height: auto;
}
```

Was du da mit z-index machen wolltest ist mir nicht klar ... dieser regelt ja welche box oben ist, und welche unten.

ich würde dir raten mit classen zu arbeiten und nicht mit ID ... dies ist vorteilhafter!



```
.navigation {
 position:relative; top:-200px; left:240px;
 width: 240px;
 height: auto;
}
 
.ci_color_01 {
background-color: red;
}
```
 
und dies im HTML dann so aufrufen:


```
<div class="navigation ci_color_01"> TEXT </div>
```

PS.
@Maik ...
ist das ein schönes Gefühl mal schneller als du eine (hoffendlich richtige) Antwort gegeben zu haben


----------



## angelikamorgan (16. Juni 2008)

Vielen Dank Mr. Grille 

Mir ist noch unklar, weshalb ich auf z-index verzichten kann.

Bei <div id="middle"> und <div id="navigation"> handelt es sich um Boxenelemente.
Gestern habe ich gelernt, dass Boxenelemente die gesamte Zeile einnehmen und sich daher gegenseitig versrängen.
Um Boxenelemente nebeneinander anzuordnen, sollte man daher mit 'float' oder 'z-index' arbeiten. In meinem Beispiel ordne ich zwei divs nebeneinander an.

Weshalb kommst du ohne 'float' und 'z-index' aus?! 

Gruß
Angelika

Nachtrag: ich habe nur eine Navigation. Ist es nicht besser, in diesem Fall mit 'id' statt mit 'class' zu arbeiten?  bei der Hintergrundfarbe würde ich dir auf jedenfall recht geben.


----------



## Grille (16. Juni 2008)

Einen Z-Index hat ja jede Box schon. Wenn du jetzt eine andere Box erstellen willst die eine gleiche Position wie deine Navi-Box, dann würde deine Navi-Box überdeckt werden.

Das Boxen die ganze Zeile einnehmen und einander verdrängen stimmt soweit auch. Das mit dem float ist eine andere Geschichte. Hier geht es darum Div-Boxen nebeneinander zu plazieren.

Leider kann ich mir nicht so richtig vorstellen, was du mir deiner Navi-Box vor hast.

Willst du ein mehrspaltiges Layout erstellen?

das solltest du besser nicht mit "position" machen:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='de' lang='de'>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>20080616_test_css_type_in_boxes</title>
 <style type="text/css">
  h1{ font-size:0.8em; line-height: 1.2em; font-family: verdana, Arial; color:#08729e;}
  p{ font-size:0.8em; line-height: 1.2em; font-family: verdana, Arial; margin-left: 1em;}
  .page {width:900px; background-color: #aaa;}
  .head {width:900px; height:100px; background-color:#666;}
  .content {width:700px; background-color: #eee;}
  .menu {width:200px; background-color: #ddd;}
  .foot {width:900px; height:50px; background-color: #999;}
  .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden;}
  .floatbox { overflow: hidden; }
  .neben {float: left; display: block;}
 </style>
</head>
<body>
 <div class='page'>
  <div class='head'>KOPP</div>
  <div class='floatbox'>
   <div class='menu neben'>KNÖPPE <br>KNÖPPE <br>KNÖPPE <br>KNÖPPE <br>KNÖPPE <br>KNÖPPE <br>KNÖPPE <br>KNÖPPE <br>KNÖPPE</div>
   <div class='content neben clearfix'>BUCHSTABEN <br>BUCHSTABEN <br>BUCHSTABEN <br>BUCHSTABEN <br>BUCHSTABEN <br>BUCHSTABEN 
<br>BUCHSTABEN</div>
  </div>
  <div class='foot'>STINKFUSS</div>
 </div>
</body>
</html>
```


----------



## Maik (16. Juni 2008)

Hi.





Grille hat gesagt.:


> hallo .. du musst der Positionsangabe auch noch einen wert der position übergeben:
> 
> ich würde dir raten mit classen zu arbeiten und nicht mit ID ... dies ist vorteilhafter!
> 
> ...


Es würde aber grundsätzlich lediglich die Positionsart (relative oder absolute) ohne Positionsangaben reichen, damit die z-index-Deklaration greift.

Das kann man nicht so verallgemeinern, denn wenn es im Dokument nur *eine* Navigation gibt, kann diese auch ruhig mit einer ID ausgezeichnet werden.

@P.S. Keine Kunst, wenn ich offline bin :suspekt:

mfg Maik


----------

