Html 将一个 DIV 浮动到另一个 DIV 之上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17652718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Float a DIV on top of another DIV
提问by Brad Adams
I was recently assigned the job of copying a JS popup our previous web developer made. I've got it very similar yet there's one thing I can't get, for the close button (X) to float over the popup in the top right corner (rather than being sat on top right corner of the popup). I've tried with position:values in the CSS and other attributes I've found around Stack overflow, yet none seem to do the trick.
我最近被分配了复制我们以前的 Web 开发人员制作的 JS 弹出窗口的工作。我得到了它非常相似但有一件我无法得到的东西，关闭按钮 (X) 浮动在右上角的弹出窗口上（而不是坐在弹出窗口的右上角）。我已经尝试过使用position:CSS 中的值和我在堆栈溢出周围找到的其他属性，但似乎没有一个能解决问题。
The CSS:
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
}
The HTML:
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>
回答by Swarnamayee Mallia
Just add position, right and top to your class .close-image
只需在班级中添加位置、右侧和顶部 .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*/
}
回答by Rohit Azad
Use this css
使用这个css
.close-image {
cursor: pointer;
z-index: 3;
right: 5px;
top: 5px;
position: absolute;
}
回答by noob
.close-image {
cursor: pointer;
display: block;
float: right;
position: relative;
top: 22px;
z-index: 1;
}
I think this might be what you are looking for.
我想这可能就是你要找的。
回答by zag
I know this post is little bit old but here is a potential solution for anyone who has the same problem:
我知道这篇文章有点旧，但对于有同样问题的人来说，这里有一个潜在的解决方案：
First, I would change the CSS display for #popup to "none" instead of "hidden".
首先，我会将 #popup 的 CSS 显示更改为“none”而不是“hidden”。
Second, I would change the HTML as follow:
其次，我将更改 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>
And for Style as follow:
对于样式如下：
.close-image
{
display: block;
float: right;
cursor: pointer;
z-index: 3;
position: absolute;
right: 0;
top: 0;
}
I got this idea from this website (kessitek.com). A very good example on how to position elements,:
我从这个网站 (kessitek.com) 得到这个想法。关于如何定位元素的一个很好的例子：
How to position a div on top of another div
I hope this helps,
我希望这有帮助，
Zag,
扎格，
回答by Johan Bouveng
What about:
关于什么：
.close-image{
display:block;
cursor:pointer;
z-index:3;
position:absolute;
top:0;
right:0;
}
Is that the desired result?
这是想要的结果吗？
