Floating un DIV su un altro DIV

Mi è stato assegnato di recente il compito di copiare un popup JS realizzato dal nostro precedente sviluppatore web. L'ho ottenuto molto simile, ma c'è una cosa che non riesco a ottenere, perché il pulsante di chiusura (X) fluttua sopra il popup nell'angolo in alto a destra (invece di essere seduto nell'angolo in alto a destra del popup). Ho provato con i valori position: nel CSS e con altri attributi che ho trovato in giro. Stack overflow, ma nessuno sembra fare il trucco.Floating un DIV su un altro DIV

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

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

fonte

2013-07-15 Brad Adams

Basta aggiungere la posizione, destra e dall'alto verso la 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*/ 
}

fonte

2013-07-15 11:13:25

Non credo che abbia un senso: 'float' significa che l'articolo è non un 'block' ma un' inline-block'. Inoltre, 'position: absolute' e' float' non vanno insieme. L'ordine in cui l'hai scritto lo fa funzionare perché il CSS usa le ultime voci, ma non ha ancora senso ... –

Che dire:

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

è che il risultato desiderato?

fonte

2013-07-15 11:07:35

Utilizzare questa css

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

fonte

2013-07-15 11:07:43

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

Penso che questo potrebbe essere quello che stai cercando.

fonte

2013-07-15 11:30:09 noob

So che questo post è po 'vecchio, ma qui è una potenziale soluzione per chi ha lo stesso problema:

In primo luogo, vorrei cambiare la visualizzazione CSS per #popup a "nessuno" invece di "nascosto" .

In secondo luogo, vorrei cambiare il codice HTML come segue:

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

E per stile come segue:

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

Ho avuto questa idea da questo sito (kessitek.com). Un ottimo esempio su come posizionare gli elementi ,:

How to position a div on top of another div

Spero che questo aiuta,

Zag,

fonte

2017-07-13 02:05:41 zag

Floating un DIV su un altro DIV

risposta

Problemi correlati