CSS positioning: relative builds independent 'stacks'; or: why is blue afraid of red & yellow?

Question

What I need to do: I need to create two div's side-by-side. Inside each div I need to have images with absolute positioning. I also need to drag those image from one div to another.

My problem is that the dragged image disappears behind the other div. Here is a jsFiddle showing the problem as the yellow div disappears behind the blue container.

My question: is there a way to make the blue container recognize the z-index (absolute position) of the yellow div while the yellow div has the red container as its anchor?

Some background: I need to achieve this because I would like to drag images from one list and then drop them into another, sortable list. I would like to achieve this with jQuery UI's draggable, droppable and sortable methods. So far, everything is easy and standard.

However, both lists of images must be slidable. In and of itself, this is relatively easily achieved with jQuery UI's slider method. However, for the images to slide, I then need to work with absolute positioning (the actual sliding of the list of images is achieved by changing the absolute position). So there is no way I can get around the relative and absolute positioning as shown in the jsFiddle.

Any help is, as always, greatly appreciated!

Answer 1

You can either:

1. apply z-index only to the elements inside the containers. (and be sure not to apply a z-index to the containers, otherwise they'll set up their own stacking contexts, and z-index applied to anything within is only relative to the new context.)

2. Remove the position:relative declaration from the 2 containers. Without any z-index declarations, positioned elements will appear in front of non-positioned elements.

An nice explanation of stacking contexts can be found here: http://timkadlec.com/2008/01/detailed-look-at-stacking-in-css/

UPDATE
You might try the helper:clone option of jQuery/UI draggable.

Since it "clones" the item you want to drag ("to be used for dragging display"), it's not bound by the same container as the original. But you'll need to deal with the fact that the item still appears in its original position while a "clone" item is being dragged around.

You can use the start and stop events of draggable to make the original invisible and visible again:

$('.myDiv')
    .draggable({
        helper: 'clone',
        start: function () {
            $(this).css('visibility', 'hidden');
        },
        stop: function () {
            $(this).css('visibility', 'visible');
        }
    })

...but then you'll need to deal with what happens when the item is dropped, as Andrius suggests. For that, I'd recommend looking at this post: clone node on drag

Good luck.