Search code examples
jquerycsshtmlpositioningresizable

Edit Position a little div inside another resizable div without disturbing the container's contents

I have a jsfiddle here: http://jsfiddle.net/asaakius/5nGYS/7/

You'll notice this little div $(#menu) with the letter "v", if I remove this div, the textarea and textbox are aligned as needed, and resizing takes place with the position of both divs totally in-sync.

But it gets messed up when I add the $(#menu) div. I just want the little menu div to be inside the upper right corner of $(#textarea), without disturbing the text inside it, and without disturbing the alignment of $(#textarea) and $(#textbox). What I mean is, I want it to be visible above the text, like as if it had a higher z-index (it's the beginning of a small menu).

Edit

I just realized that if I keep menu's position:absolute, it stays in the container. But how to keep it on the right side? I want it to be consistently positioned in the upper right corner, regardless of resizes.

Solution

  • Change the style of #menu to:

    #menu{ right: 0; color:red; position:absolute; }​

    Float:right causes the next div to flow around it, position:absolute; causes it to be taken out of the flow completely.