CODEWITHSUNDEEP
htmlcss
Nathan30
Nathan30

Reputation: 881

DIV in foreground

I have this HTML CODE, and I want the div with dragHandle class in foreground, up the second div. I try with the z-index but not working...

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

Any help ?

Thanks

Upvotes: 0

Views: 180

Answers (2)

Banzay
Banzay

Reputation: 9470

I think you need to set absolute position for this div and relative to the parent one.

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

Upvotes: 2

kidconcept
kidconcept

Reputation: 559

HTML elements layer by default on the order they are nested. Elements that are children are drawn over elements that are parents. You could take advantage of this by making div.dragHandle a child of the element you want it over:

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

From the looks of it you are missing some closing tags as well, so be sure that your div.row and div.col-s12 have closing tags.

Upvotes: 1

Related Questions