将一个DIV浮动在另一个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>

- Brad Adams

Answer 1

只需在您的类.close-image中添加position、right和top属性即可。

.close-image {
   cursor: pointer;
   display: block;
   float: right;  
   z-index: 3;
   position: absolute; /*newly added*/
   right: 5px; /*newly added*/
   top: 5px;/*newly added*/
}

- Swarnamayee Mallia

---

我认为这没有意义：float的意思是该项不是一个block而是一个inline-block。另外，position: absolute和float不能同时使用。你写的顺序让它起作用是因为CSS使用最后的输入，但仍然没有意义... - Alexis Wilke

Answer 2

使用这个 CSS。

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

- Rohit Azad Malik

Answer 3

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

我认为这可能是你正在寻找的内容。

- noob

Answer 4

我知道这篇文章有点老了，但对于那些遇到相同问题的人，这里有一个潜在的解决方案：

首先，我会将 #popup 的 CSS 显示方式更改为 "none"，而不是 "hidden"。

其次，我会按照以下方式更改 HTML：

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

并且样式如下：

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

我从这个网站（kessitek.com）得到了这个想法，它提供了一个非常好的关于如何定位元素的例子：

如何将一个 div 定位在另一个 div 的顶部

希望这能帮到你，

Zag，

- zag

Answer 5

这个怎么样：

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

这是期望的结果吗？

- Johan Bouveng