Float ein DIV auf einem anderen DIV

Ich wurde vor kurzem beauftragt, ein JS-Popup kopieren unserer vorherigen Web-Entwickler gemacht. Ich habe es sehr ähnlich, aber es gibt eine Sache, die ich nicht bekommen kann, denn der Schließen-Knopf (X) schwebt über dem Popup in der oberen rechten Ecke (anstatt auf der oberen rechten Ecke des Popups zu sitzen). Ich habe versucht, mit position: Werte in der CSS-und andere Attribute, die ich rund um Stack-Überlauf gefunden habe, doch keiner scheint den Trick zu tun.Float ein DIV auf einem anderen DIV

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

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

Quelle

2013-07-15 Brad Adams

Gerade Position hinzufügen, rechts und oben nach Klasse .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*/ 
}

Quelle

2013-07-15 11:13:25

Ich glaube nicht, das macht Sinn: 'float' bedeutet, dass der Artikel ist kein 'Block', sondern ein' Inline-Block'. Auch "Position: Absolut" und "Float" passen nicht zusammen. Die Reihenfolge, in der Sie es geschrieben haben, macht es funktioniert, weil CSS die letzten Einträge verwendet, aber es macht immer noch keinen Sinn ... –

Was:

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

Ist das das gewünschte Ergebnis?

Quelle

2013-07-15 11:07:35

verwenden css

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

Quelle

2013-07-15 11:07:43

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

Ich denke, das könnte das sein, was Sie suchen.

Quelle

2013-07-15 11:30:09 noob

Ich weiß, das Post wenig alt, aber hier ist eine mögliche Lösung für jeden, der das gleiche Problem hat:

Zuerst würde ich den CSS-Display für #popup ändern auf „none“ statt „versteckt“ .

Zweitens würde ich die HTML wie folgt ändern:

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

Und für Stil wie folgt:

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

habe ich diese Idee von dieser Website (kessitek.com). Ein sehr gutes Beispiel dafür, wie Elemente zu positionieren ,:

How to position a div on top of another div

Ich hoffe, das hilft,

Zag,

Quelle

2017-07-13 02:05:41 zag

Float ein DIV auf einem anderen DIV

Antwort

Verwandte Themen