フォアグラウンドでのDIV

Question

私はこのHTMLコードを持っています。私は、フォアグラウンドでdragHandleクラスでdivを2番目のdivにします。私はZインデックスで試してみましたが、うまくいきませんでした...

 <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> 

助けてください？

おかげで、彼らがネストされているために、デフォルトで

Answer 1

私はこのdivの絶対位置と親の相対位置を設定する必要があると思います。

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

Answer 2

HTML要素層。子要素である要素は、親である要素の上に描画されます。あなたはそれを上にしたい要素の子をdiv.dragHandleことによって、これを利用できますので、あなたにもいくつかの終了タグが欠落しているその様子から

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

必ずそのごdiv.row div.col-s12には終了タグがあります。