Question

我有这个HTML CODE，我想在前台使用dragHandle类的div，然后是第二个div。我尝试使用z-index但没有工作...

     <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的绝对位置以及相对于父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有结束标记。

DIV在前景中

2 个答案: