Ich hatte kürzlich den Auftrag, ein JS-Popup zu kopieren, das unser vorheriger Webentwickler erstellt hat. Ich habe es sehr ähnlich, aber es gibt eine Sache, die ich nicht bekommen kann: Der Schließen-Button (X) schwebt über dem Popup in der oberen rechten Ecke (anstatt oben rechts im Popup zu sitzen). Ich habe es mit position:
-Werten in der CSS und anderen Attributen versucht, die ich in der Umgebung des Stack-Überlaufs gefunden habe, ohne jedoch den Trick auszuführen.
Das 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
}
Das 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>
Fügen Sie Ihrer Klasse einfach die Position rechts und oben hinzu. .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*/
}
Verwenden Sie diese CSS
.close-image {
cursor: pointer;
z-index: 3;
right: 5px;
top: 5px;
position: absolute;
}
.close-image {
cursor: pointer;
display: block;
float: right;
position: relative;
top: 22px;
z-index: 1;
}
Ich denke, das ist, wonach Sie suchen.
Wie wäre es mit:
.close-image{
display:block;
cursor:pointer;
z-index:3;
position:absolute;
top:0;
right:0;
}
Ist das das gewünschte Ergebnis?
Ich weiß, dass dieser Beitrag etwas alt ist, aber hier ist eine mögliche Lösung für alle, die das gleiche Problem haben:
Zuerst würde ich die CSS-Anzeige für #popup in "none" anstelle von "hidden" ändern.
Zweitens würde ich den HTML-Code 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 Style wie folgt:
.close-image
{
display: block;
float: right;
cursor: pointer;
z-index: 3;
position: absolute;
right: 0;
top: 0;
}
Ich habe diese Idee von dieser Website (kessitek.com) bekommen. Ein sehr gutes Beispiel für die Positionierung von Elementen:
Wie positioniere ich ein div auf einem anderen div
Ich hoffe das hilft,
Zag,