CODEWITHSUNDEEP
jquery-ui
Steve
Steve

Reputation: 4898

Why does drag go behind target div?

I'm dragging a div into another div and and clone is going behind the target div: enter image description here

The HTML is

 <div id="widget_area"> 
    <div id="orangeBox" class="widget"> </div>
</div>
<div id="page">
</div>

There's a jsFiddle at http://jsfiddle.net/stevea/2Xu2P/8/ that shows the HTML, jQuery, and CSS much better than this. Only included this, because the forum requires some code if you link to a jsFiddle.

I can fix the problem two ways: remove the widget_area div:

enter image description here

or remove the position:relative style from the target div:

enter image description here

Does anyone see what's going on?

Thanks.

Upvotes: 2

Views: 1904

Answers (1)

Brad
Brad

Reputation: 6332

define a z-index for both containers and make your orange container a higher value.
ie: 

.widget {
  width:98px;
   height:98px;
   background-color:orange;
   border:1px solid black;
   cursor:pointer;
   z-index: 3; 
}
div#page {
    width:500px;
    height:300px;
    background-color:#3a8;
    border:3px solid black;
    position:relative;    
    z-index: 1; 
}

here's your updated fiddle: http://jsfiddle.net/2Xu2P/10/

Upvotes: 2

Related Questions