jQuery/CSS floating/overlay toolbar/buttons

Question

I'm not sure if I'm using the correct terminology to describe what I'm looking for but it's the best I could come up with.

Essentially I have a list of items that I'm currently displaying in DIVs. I'm using the jQuery UI plug-ins and hooking up styles to toggle when the user hovers over each item. Now I'd like to have a small toolbar-like set of buttons appear in the upper-right corner of each item when the mouse hovers over that item. When the mouse moves up or down to the next item, the toolbar "moves" to that item. Of course, it doesn't really move - I'm assuming that I'm toggling the visibility of a toolbar associated with each item.

The latter point is due to a couple of factors including that the buttons are encoded with the id value for each list item so the command knows which item to work against.

What I need to know is how to create the HTML and CSS so that I can have a DIV with contents that are unaffected by the display of the toolbar. And the markup and style settings to get the toolbar to appear in the upper-right corner of each item, above the existing content.

UPDATE

I basically have a <DIV> wrapper that contains another <DIV> with text and another <DIV> that contains a set of image buttons (images wrapped in anchors). What I need is the HTML and CSS so that the <DIV> (or whatever other element is required to make it work) containing the buttons appears to float in the top-right corner of the parent <DIV> as shown in the picture below:

I can then use jQuery to show and hide the buttons when the item is hovered.

Answer 1

If you ONLY need the HTML/CSS you could do something like this:

CSS
/* this contain both your injected JS and your current content */
.highlight { background:#ddd; position:relative; overflow:auto; padding:15px;}
.highlight * {margin:0; padding:0;}
/* you will place your action buttons here, they seem to be: delete, promote, demote */
.highlight .nav { position:absolute; top:0; right:0; background:#333; list-style-type:none; }
.highlight .nav li {float:left; margin:0 1px; list-style-type:none;}
/* add the styles per each button, they will all look the same for now */
.highlight .nav li a {display:block; height:15px; width:10px; background:red; text-indent:-9999px; cursor:pointer;}

HTML
<div class="highlight">
  <ul class="nav">
    <li><a>DELETE</a></li>
    <li><a>PROMOTE</a></li>
    <li><a>DEMOTE</a></li>
  </ul>
 <p>your current content will be here, could also be a div or anything else, it just needs to be sitting inside the .hightlight div</p>
</div>

EDIT: Updated with the code I posted at http://jsfiddle.net/edCD3/

Good luck, Leo