Bild bewegt sich hinter dem div

Question

Ok, so habe ich ein Problem mit meiner Website, die ich erstelle. Ich habe 3 Hauptdivs: ein Header, ein Top-Bar, knapp unter de Header, und ein Hauptdiv, knapp unter de Top-Bar.

In meinem Hauptdiv, habe ich ein Bild von einem Auto und machte es an die Spitze mit Java Script. Aber auf seine Weise zum Anfang der Seite jave ich meine Kopfzeile und meine obere Stange divs, und das Bild, das aufwärts bewegt, bewegt SICH VOR DEN divs, also sind die divs hinter dem Bild. Ich habe schon fast alles mit den Positionen und index-z ausprobiert, aber ich konnte nicht herausfinden, wie man das Bild hinter die divs stellt, wenn es hochgeht. Ich hoffe du hast es verstanden und hilfst mir bitte.

http://i.imgur.com/wf9RJRO.png Dies ist der Teil von der Webseite mit dem Auto. Ich will nur, dass es hinter diese Divs geht, wenn es hochgeht.

Dies ist das Bild des Autos:

<img src="images/top_main_image.png" id="car" style="position:relative;bottom:5px;margin-left:41.8%;margin-top:50px;"> 

Dies ist der Header div und die obere Leiste:

div.header 
{ 
    width:auto; 
    height:45px; 
    background-color:#333333; 
    float:center; 
    background-repeat: no-repeat; 
    background-position: auto; 
    position:absolute; 
    opacity:1; 
    width:100%; 
    z-index:10; 
} 

div.top_bar 
{ 
    width:auto; 
    height:110px; 
    background-color:#f7f7f7; 
    float:center; 
    background-repeat: no-repeat; 
    background-position: auto; 
    posotion:absolute; 
    z-index:10; 
} 

Answer 1

Sie sollten diese CSS für das Bild verwenden. Ich änderte die Position von relativ zu absolut und ich fügte Z-Index hinzu. Sie könnten das ganze Beispiel here ausprobieren.

position: absolute; 
    bottom: 5px; 
    margin-left: 41.8%; 
    margin-top: 50px; 
    z-index: -1