how to create a fixed floating button on top right of textarea

Question

I want to write something like the following:

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

the outter is td element, and textarea is inside. I want a fixed floating button on the right top corner of textarea, or td. And this textarea and td is behind of this floating button. I tried to use z-index to do that, but didn't work.

Also the button is a dropdown menu.

Can someone tell me how to implement this?

Thanks

Answer 1

You'll be able to do this by giving the outer container position: relative; and then the inner elements:

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

You can then 'layer' them with z-index.

Just because I lost out on 6 points by not including a JSFiddle - here's a demo - http://jsfiddle.net/spacebeers/WYrwf/