CODEWITHSUNDEEP
csshtmlposition
Brad Adams
Brad Adams

Reputation: 2069

Float a DIV on top of another DIV

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:

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

Upvotes: 20

Views: 161140

Answers (6)

Marcell Harmaci
Marcell Harmaci

Reputation: 93

Just add position: relative to the parent and position: absolute and set top/bottom/left/right on the child.

.main {
  width: 100%;
  height: 100%;
  position: relative;
}

.pink {
  width: 150px;
  height: 150px;
  background-color: pink;
  position: absolute;
  left: 50px;
  top: 50px;
}

.blue {
  width: 100%;
  height: 300px;
  background-color: lightblue;
}
<div class="main">

<div class="pink">
</div>

<div class="blue">
</div>

</div>

Upvotes: 0

Swarnamayee Mallia
Swarnamayee Mallia

Reputation: 2008

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*/
}

Upvotes: 31

zag
zag

Reputation: 261

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,

Upvotes: 1

noob
noob

Reputation: 641

.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.

Upvotes: 2

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Use this css

.close-image {
    cursor: pointer;
    z-index: 3;
    right: 5px;
    top: 5px;
    position: absolute;
}

Upvotes: 5

Johan Bouveng
Johan Bouveng

Reputation: 565

What about:

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

Is that the desired result?

Upvotes: 0

Related Questions