DIV im Vordergrund

Question

Ich habe diesen HTML-Code, und ich möchte das div mit DragHandle-Klasse im Vordergrund, bis das zweite div. Ich versuche es mit dem z-index aber nicht funktioniert ...

 <div id="containerYoutube"> <!-- ********** Container Youtube ********** --> 
     <div class="dragHandle"> 
      <i class="fa fa-circle-thin" aria-hidden="true"></i> 
     </div> 
     <div class="row"> 
      <div class="col-s12"> 
     <div class="youtubeCard card"> 
      <div class="card-image"> 
       <object 
         data="http://www.youtube.com/embed/<?= $videos['id']['videoId']?>"> 
       </object> 
      </div> 
     </div> 
    </div> 

Irgendwelche Hilfe?

Danke

Answer 1

Ich denke, Sie müssen die absolute Position für dieses div und relativ zu dem übergeordneten festlegen.

#containerYoutube { 
    position: relative; 
} 
#dragHandle { 
    position: absolute; 
} 

Answer 2

HTML-Elemente Layer standardmäßig in der Reihenfolge, in der sie verschachtelt sind. Elemente, die Kinder sind, werden über Elemente gezogen, die Eltern sind. Sie könnten, indem sie div.dragHandle ein Kind des Elements dies nutzen Sie es wollen über:

<div id="containerYoutube"> 
    <div class="youtubeCard card"> 
     <div class="dragHandle"></div> <!-- dragHandle is inside youtubeCard --> 
     <div class="card-image"></div> 
    </div> 
</div> 

Von den Blicken von ihm einige Endtags auch fehlen, so sicher sein, dass Ihre div.row und div.col-s12 haben abschließende Tags.