Wie verschiebe ich Inhalt von einem Div über einen anderen mit CSS?

Question

Ich habe den folgenden Code:

<div class="main"> 
    <div class="first_div"> 
     <div class="nested_first"> 
     </div> 
     <div class="nested_second"> 
      Hello World 
     </div> 
    </div> 
</div> 

Die CSS ist wie folgt:

.main{ 
    display: inline-block; 
    width: 500px; 
    height: 100px; 
} 
.nested_first { 
    position: absolute; 
    width: 40%; 
    height: 100%; 
    background-color: white; 
} 

.nested_second { 
    width: 32.5rem; 
    border: 3px solid $white; 
    height: 100%; 
} 

.first_div { 
    position: relative; 
    height: 7rem; 
    width: 100%; 
    margin: 1rem; 
    box-shadow: 0 0 .3rem 0 rgba(0, 0, 0, 0.3); 
    &:hover { 
    cursor: pointer; 
    .planTitle { 
     color: $forest; 
    } 
    .planChannels { 
     color: black; 
    } 
    } 
} 

Aus diesem Grund kann ich nicht den Inhalt von nested_second sehen. Wie kann ich es nur mit HTML und CSS sichtbar machen?

Der Stift dieses Codes ist wie folgt: code

Answer 1

Wenn Sie nur die zweite über die erste übergeben wollen, können Sie die z-index Eigenschaft verwenden: http://www.w3schools.com/cssref/pr_pos_z-index.asp