Z-index med CSS

%

Så må du jo stoppe dovenskaben og konstruere din HTML så det er muligt.

Eksperimenter med relative og absolutte positioneringer. For det er tydeligvis noget du ikke helt har forstået endnu.

Ny har jeg skidt noget kode ud til dig som du kan bruge. Så må du selv tilpasse det.

 <style>
     body {
         margin: 0;
         padding: 0;
     }
 
     .everything {
         margin: 0 auto;
     }
 
     .header {
         background: url(http://ziimx.zeekoo.dk/test/images/logo_02.jpg) left top repeat-x;
         position: relative;
         z-index: 1000;
     }
 
     .menu {
         height: 400px;
         width: 200px;
         border: 1px solid #ccc;
         position: absolute;
         z-index: 10000; /* Sæt z-index lavere for at flytte menuen bagud */
         top: -40px;
         left: 50px;
         background: #fff;
     }
 
     .inner-wrap {
         position: relative;
     }
 
     .content-wrap {
         margin: 0 50px 0 260px;
     }
 
     .content {
         border: 1px solid #ccc;
     }
 
 </style>
 <div class="everything">
     <div class="header"><img src="http://ziimx.zeekoo.dk/test/images/logo_01.jpg" /></div>
     <div class="inner-wrap">
         <div class="menu">adada</div>
         <div class="content-wrap">
             <div class="content">
                 asdasdadadad
             </div>
         </div>
     </div>
 </div>

<div style="position: relative;">
<div id="logo_top" style="position: absolute; z-index: 20; top: 0px; left: 0px;"><img src="images/logo_01.jpg" style="float:left;"></div>
<div id="menu" style="position: absolute; top: 10px; left: 0px;z-index: 10;"></div>
</div>

okay tak, men får lidt problemer ,

1. det jeg gerne ville have var at menu'en den var lidt væk fra venstre side af browseren, men hvis ens browser vindue er mindre, så skal menu'en rykke sig ind mod venstre, derfor tror jeg ikke at man kan bruge position relative.. eller?

2. som du kan se her http://ziimx.zeekoo.dk/test/ så får jeg et problem med at mit "logo" billed skære ind i menu'en :/, er det ikke noget som kan fixes?.

og tusind tak for hjælpen endtil videre

Det jeg har givet af kode er et eksempel. Det er ikke en direkte løsning.

For at få den hvide "kasse" til det du vil, er du enten nødt til at have den del af kassen med i dit logo-grafik, eller prøve at erstatte den grå baggrund i logo-grafikken med transperans og derefter flytte #menu højere op.

det med at have en del af kassen(menu'en) med i logo'et vil ikke virke da jeg også skal have en content som er rimelig tæt op af menu'en.. og så vil der jo ikke blive plads til den.

kunne måske godt lave logo grafikken transperant, men så skal jeg aligevel bruge det der Z-index sån at menu'en kommer til at ligge Under Logo'et, er der ikke en anden mulighed med det z-index end at bruge ralativ position?,

Den relative position har kun effekt på childnodes. Childnodes positioneres i forhold til sin parents x og y koordinater. Det er der ikke nogen ben i.

Hvis det er det her du prøver at ramme: http://ziimx.zeekoo.dk/
Så kan begge forslag sagtens bruges. En af dem skal bruges, da der ikke rigtig er andre muligheder.

Yusuf, har jeg prøvet ,.

Gnu.. det jeg gerne vil have er at min menu skal kunne rykke sig fra højre mod venstre, hvis ens browser vindue er mindre .

Ahh tusind tak skal du have Gnu, det vil jeg så kigge lidt på , kom lige i tanke om at man godt kan rykke menu'en med relative og absolutte positioner .