Question

I have a div that is styled like a box. It is dragged using jQuery UI. When it is dragged I would like to add an image to the top of the box. The image should be overlapping the box, so background is out of the question.

1. How do I add such image? Do I use append?

2. The draggable box has a dynamic z-index set by jQuery UI. How do I make sure that appended image is at least +1 to be on top?

Answer 1

Add the image with prepend, and position it absolutely:

var $mainBox = $('#main-box')
                    .prepend('<img class="centered" src="..." />')
                    .css('position', 'relative'),

    $img = $mainBox.find('.centered');

$img.css({
    position: 'absolute',
    top: '-20px', // change this to whatever you want
    left: ( $mainBox.width() - $img.width() ) / 2
});

---

A better approach would be to have the img there all along, and just show/hide it when dragging. That way, you can keep your CSS where it belongs, and you won’t have to shuffle elements in and out of the DOM.