I am trying to align pop-up elements in a header element in a table. Eventually the pop-up elements will provide functionality like sorting and filtering for my table. 

Per default the pop ups align themselves to the ***left***, but I would like to align them to the ***right*** :

![enter image description here](https://i.stack.imgur.com/WVdPr.png) 

My CSS code looks like something like this :

```
.Table .Popup {
    position:absolute;
    z-index:9999;
}

```

I would like to use the **relative** position instead of **absolute** (ie.relative to the header item), but I am not sure how. If I use absolute, doesn't that interfere with any other parent containers that have position set to absolute?

JSFiddle : <http://jsfiddle.net/XJXuR/9/>

Does anyone know how this can be done? JQuery or Javascript is fine. Thx.