将一个 DIV 浮动到另一个 DIV 之上答案

【问题标题】：Float a DIV on top of another DIV将一个 DIV 浮动到另一个 DIV 之上
【发布时间】：2013-07-13 05:27:50
【问题描述】：

我最近被分配了复制我们以前的 Web 开发人员制作的 JS 弹出窗口的工作。我得到了它非常相似但有一件我无法得到的东西，关闭按钮（X）漂浮在右上角的弹出窗口上（而不是坐在弹出窗口的右上角）。我已经尝试使用 CSS 中的 position: 值和我在堆栈溢出周围发现的其他属性，但似乎没有一个可以解决问题。

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>

【问题讨论】：

标签： css html position

【解决方案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*/
}

【讨论】：

我认为这没有意义：float 表示该项目不是block，而是inline-block。另外，position: absolute 和 float 不能同时使用。你写它的顺序使它工作，因为 CSS 使用最后的条目，但它仍然没有意义......

【解决方案2】：

使用这个 css

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

【讨论】：

【解决方案3】：

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

我想这可能就是你要找的。p>

【讨论】：

【解决方案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) 得到了这个想法。关于如何定位元素的一个很好的例子：

How to position a div on top of another div

希望对你有帮助，

Zag，

【讨论】：

【解决方案5】：

怎么样：

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

这是想要的结果吗？

【讨论】：