How to set a div in front of its own content?

Question

I'm trying to drag and drop divs around within a bigger div. In the divs is a title and an image. The Problem is that I can't click on the img or text to drag the whole div. How can I set the div in front his own content?

<div class="bigDiv">
    <div class="littleDiv1" draggable="true">
        <p class=title1>Title1</p>
        <img src="#" class="img1" draggable="false">
    </div>
    <div class="littleDiv2" draggable="true">
        <p class=title2>Title2</p>
        <img src="#" class="img2" draggable="false">
    </div>
    <div class="littleDiv3" draggable="true">
        <p class=title3>Title3</p>
        <img src="#" class="img3" draggable="false">
    </div>
</div>

I tried also with draggable="false" but it doesn't work. I tried with the z-index too, but it worked neither.

Answer 1

You have to use z-index and set position style for that.

So for exemple, you can add this to your div style :

position:relative; 
z-index: 1000!important;