Float a DIV on top of another DIV

Question

I was recently assigned the job of copying a JS popup our previous web developer made  I ve got it very similar yet there s one thing I can t get  for the close button  X  to float over the popup in the top right corner  rather than being sat on top right corner of the popup   I ve tried with position  values in the CSS and other attributes I ve found around Stack overflow  yet none seem to do the trick   The CSS    popup       position absolute      display hidden      top 50       left 50       width 400px      height 586px      margin-top -263px      margin-left -200px      background-color  fff      z-index 2      padding 5px     overlay-back       position   fixed      top   0      left   0      width   100       height   100       background    000      opacity   0 7      filter   alpha opacity 60       z-index   1      display  none     close-image       display  block      float right      cursor  pointer      z-index 3     The HTML    lt div id  overlay-back  gt  lt  div gt   lt div id  popup  gt       lt img class  close-image  src  images closebtn png    gt  lt span gt  lt img src  images load sign png  width  400  height  566    gt  lt  span gt   lt  div gt

User · Answer

I know this post is little bit old but here is a potential solution for anyone who has the same problem:

First, I would change the CSS display for #popup to "none" instead of "hidden".

Second, I would change the HTML as follow:

<div id="overlay-back"></div>
<div id="popup">
    <div style="position: relative;">
        <img class="close-image" src="images/closebtn.png" />
        <span><img src="images/load_sign.png" width="400" height="566" /></span>
    </div>            
</div>

And for Style as follow:

.close-image
{
   display: block;
   float: right;
   cursor: pointer;
   z-index: 3;
   position: absolute;
   right: 0;
   top: 0;
}

I got this idea from this website (kessitek.com). A very good example on how to position elements,:

How to position a div on top of another div

I hope this helps,

Zag,

User · Answer

Just add position  right and top to your class  close-image   close-image       cursor  pointer      display  block      float  right        z-index  3      position  absolute    newly added       right  5px    newly added       top  5px   newly added

User · Answer

Use this css   close-image       cursor  pointer      z-index  3      right  5px      top  5px      position  absolute

User · Answer

close-image       cursor  pointer      display  block      float  right      position  relative      top  22px      z-index  1      I think this might be what you are looking for

User · Answer

What about    close-image      display block      cursor pointer      z-index 3      position absolute      top 0      right 0      Is that the desired result

[css] Float a DIV on top of another DIV

Examples related to css

Examples related to html

Examples related to position