Question

I have a jQuery button and I would like a simple div to appear under it when I press it.

I have the div position set to relative but how do I position my div right under the button, no matter where the button is?

Answer 1

I would use absolute positioning, instead of relative. Then, in the button’s click event handler, just set the div’s top equal the top of the button plus the height of the button plus what space you want between them. Similarly, set the div’s left to the button’s left. These calculations can use the offset^[API] and outerHeight^[API] methods to produce a div that is below the button and flush with the left side of the button.

For example…

$('#btn').click(function() {
    var btn = $(this);
    $('#div').css({
        position: 'absolute',
        top: btn.offset().top + btn.outerHeight() + 10,
        left: btn.offset().left
    }).show();
});

If you want the div to be centered or right-justified with respect to the button, then adjust the coordinate calculations accordingly.