web-dev-qa-db-fra.com

Flotter une DIV sur une autre DIV

On m'a récemment confié le travail de copier un JS popup créé par notre développeur Web précédent. Je l'ai très similaire mais il y a une chose que je ne peux pas obtenir, pour que le bouton de fermeture (X) flotte au-dessus de la fenêtre en haut à droite (au lieu d'être assis dans le coin en haut à droite de la fenêtre). J'ai essayé avec les valeurs position: dans le CSS et d'autres attributs trouvés autour du débordement de pile, mais aucun ne semble faire l'affaire.

Le 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
}

Le 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>
csshtmlposition
16
Brad Adams

Ajoutez simplement la position, droite et en haut de votre classe .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*/
}
25
Swarnamayee Mallia

Utilisez ce css 

.close-image {
    cursor: pointer;
    z-index: 3;
    right: 5px;
    top: 5px;
    position: absolute;
}
3
Rohit Azad
.close-image {
    cursor: pointer;
    display: block;
    float: right;
    position: relative;
    top: 22px;
    z-index: 1;
}

Je pense que cela pourrait être ce que vous recherchez.

2
noob

Qu'en est-il de:

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

Est-ce le résultat souhaité?

0
Johan Bouveng

Je sais que ce post est un peu vieux, mais voici une solution potentielle pour quiconque a le même problème:

Tout d'abord, je modifierais l'affichage CSS pour #popup en "aucun" au lieu de "masqué".

Deuxièmement, je modifierais le code HTML comme suit:

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

Et pour le style comme suit:

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

J'ai eu cette idée de ce site (kessitek.com). Un très bon exemple sur la façon de positionner les éléments:

Comment positionner une div par-dessus une autre div

J'espère que ça aide,

Zag,

0
zag