2016-07-12 11 views
0

Ich habe diese HTMLCSS-Z-Index Wie bekomme ich den Baumstamm vor dem Boden zu zeigen?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="/css/styles.css"> 
    <title>Tree</title> 
</head> 
<body> 
    <section class="picture"> 
    <div class="tree_trunk"> 

    </div> 
    <section class="sky"> 

    </section> 
    <section class="ground"> 

    </section> 
    </section> 
</body> 
</html> 

und jetzt will ich in dem Himmel Boden und Baumstamm füllen eine ansprechende Bild zu sein, so dass es wächst und expandiert mit Browser. Derzeit kann ich den tree_trunk jedoch nicht an die Front bringen.

.picture { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 
.sky { 
    position: absolute; 
    background-color: blue; 
    height: 38%; 
    width: 100%; 
} 
.ground { 
    position: absolute; 
    width: 100%; 
    height: 62%; 
    top: 38%; 
    background-color: green; 
} 
.tree_trunk { 
    position: absolute; 
    z-index: -1; 
    width: 30px; 
    height: 80px; 
    color: brown; 
    top: 22%; 
    left: 40px; 
} 
+0

wenn Sie zu machen will, dass der Baumstamm oben ist, warum benutzt du einen negativen 'Z-Index' darauf? –

+0

ja @SamiaRuponti du hast Recht, Hintergrundfarbe zu Baumstamm und Z-Index geben: 1 –

+0

Ich habe Z-Index: 1; und das ist auch gescheitert – sayth

Antwort

1

Ihr Baumstamm ist, ist z-index im .picture Abschnitt verschachtelt. So geht Ihr Baum z-index nur über andere Elemente innerhalb Ihrer .picture div.

Wenn Sie möchten, dass ein Bild über einem anderen angezeigt wird, muss die z-index höher sein. Zweitens müssen die Elemente auf der gleichen Ebene sein. Sie werden also technisch Ihr .picture Element zu geben, haben eine z-index (und ein position, z-index nicht ohne Position arbeiten.)

Der einzige Weg, um die Verschachtelung Problem zu bekommen, ist zu Ihrem Baum Element position:fixed;