css - 将一个 DIV float 在另一个 DIV 之上

Question

我最近被分配到复制我们以前的网络开发人员制作的 JS 弹出窗口的工作。我得到它非常相似，但有一件事我无法得到，关闭按钮 (X) 漂浮在右上角的弹出窗口上(而不是坐在弹出窗口的右上角)。我已经尝试使用 CSS 中的 position: 值和我在 Stack overflow 周围发现的其他属性，但似乎都无法解决问题。

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
}

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>

Answer 1

只需将位置、右侧和顶部添加到您的类 .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*/
}