Question Flotter une DIV sur une autre DIV


J'ai récemment été chargé de copier un popup JS 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 sur la fenêtre dans le coin supérieur droit (plutôt que d'être assis dans le coin supérieur droit de la fenêtre). J'ai essayé avec position: valeurs dans le CSS et d'autres attributs que j'ai trouvés autour de Stack overflow, 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>

15
2017-07-15 11:02


origine


Réponses:


Ajoutez simplement la position, à droite et en haut à 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*/
}

24
2017-07-15 11:13



Utilisez ce css

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

3
2017-07-15 11:07



.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
2017-07-15 11:30



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
2017-07-15 11:07



Je sais que cet article est un peu ancien, mais voici une solution potentielle pour quiconque a le même problème:

Premièrement, je changerais l'affichage CSS pour #popup en "none" au lieu de "hidden".

Deuxièmement, je changerais 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 des éléments:

Comment positionner une div sur une autre div

J'espère que ça aide,

Zag,


0
2017-07-13 02:05