How to make a div appear partially overlayed on top of another square div

Question

I am trying to code this from scratch, so that when a button clicked it makes an options div appear on top of the existing div without displacing it's original position. This picture illustrates the concept:

http://i.stack.imgur.com/lxL4r.jpg

I have put an 'onclick' command on the button so that the javascript below is executed upon clicking the button

xmlObj.open ('GET', '/ajax?action=editbox', true);
xmlObj.send ('');

I have omitted the rest of the code prior to this point as it's standard stuff.

This is where I am now completely stuck. I want to now have code in a php file called 'editbox.php' which tells the webpage to make the options div in the picture appear on top of the orignal div (without displacing the position of the original div).

I would appreciate any tips or guidance very much.

Answer 1

This seems like more of an HTML/CSS question; there's no clear reason (at least, not from the phrasing of the question) to use PHP to accomplish this. Your options div might as well be present in the DOM from the time your page is first loaded, but with its CSS display set to none . Give the button and the parent div position: relative then style the button and the options div to be positioned absolutely to the upper right corner of the parent. Make sure the button and the options div are the last children of that parent box, and that they're in that order, so the z-index will naturally occur the way you want them to. In the button's onclick , set the options div to display: block .