CSS Position of img in div, if is absolute?

Question

I have div with position:absolute - cause I need it to show/hide this div on my page.

Now I want to place an Close-Button top-right But I can't =( because my div is already absolute...

http://jsfiddle.net/W7x8G/

If possible, please, no JS

Thanks

Answer 1

You can add:

top: 0;
right: 0;

To your .closeBut selector and it will position the button in the top right corner. Here is a fiddle: http://jsfiddle.net/mJ6LG/

Answer 2

There's no issue with absolute positioning children in absolute positioned parents. If you want it in the top right do something like

.closeBut {
  top: 10px;
  right: 10px;
}

see demo http://jsfiddle.net/W7x8G/1/

Answer 3

http://jsfiddle.net/W7x8G/3/

.addList {
 background-color:#f16529;
 border:5px solid #c5330e;
 cursor:default;
 display:none;
 margin-top: 15px;
 position:absolute;
 text-align:left;
 width:200px;
 z-index:100;
 padding: 25px 25px 20px 0px;
 border-radius:6px;  
-moz-border-radius:5px; 
-khtml-border-radius:10px;
}
.closeBut {
 background:url(/img/close.png) no-repeat;
 cursor:pointer;
 width: 42px;
 height: 20px;
 border: none;
 position:absolute;
 padding-top: 0px; padding-right:0px;
 }
.closeBut:hover {
background:url(/img/close_hov.png) no-repeat;

}
.alignBut{
 text-align:right;
 padding-right:25px;
}

you can try this!