How to create a fixed floating button in the upper right corner of a text field

Question

I want to write something like the following:

|------------------------------------------------------|</br> |td | | |--------------------------------------------------| | | |textarea floating button | | | | | | | | | | | | | | | | | | | | | | | |--------------------------------------------------| | |------------------------------------------------------| 

The outer element is td, and textarea is inside. I want a fixed floating button in the upper right corner of textarea or td. And that textarea and td are behind this floating button. I tried to use z-index for this, but did not work.

Also, the button is a drop-down menu.

Can someone tell me how to implement this?

thanks

Answer 1

You can do this by specifying the outer position of the container: relative; and then internal elements:

 position: absolute; top: 0px; right: 0px; 

Then you can overlay them on z-index.

Just because I lost 6 points without turning on JSFiddle - here's the demo - http://jsfiddle.net/spacebeers/WYrwf/

Answer 2

Or see the Spacebeers solution in action :-)

http://jsfiddle.net/e2Ggm/