在一个div上显示一个div [英] Displaying one div on top of another
问题描述
我有一些带有两个div的HTML:
I have some HTML with two divs:
<div>
<div id="backdrop"><img alt="" src='/backdrop.png' /></div>
<div id="curtain" style="background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;"> </div>
</div>
我希望第二个div #curtain
出现在div #backdrop
的顶部.两个div的大小相同,但是我不确定如何将第二个div放在另一个div上.
I want the second div #curtain
to appear on top of the div #backdrop
. The two divs are the same size, however I'm not sure how to position the second div on top of the other.
推荐答案
在每个DIV的style
属性中使用CSS position: absolute;
,后跟top: 0px; left 0px;
.用任意值替换像素值.
Use CSS position: absolute;
followed by top: 0px; left 0px;
in the style
attribute of each DIV. Replace the pixel values with whatever you want.
您可以使用z-index: x;
设置垂直的顺序"(一个在顶部").将x
替换为数字,较高的数字位于较低的数字之上.
You can use z-index: x;
to set the vertical "order" (which one is "on top"). Replace x
with a number, higher numbers are on top of lower numbers.
这是您的新代码的外观:
Here is how your new code would look:
<div>
<div id="backdrop" style="z-index: 1; position: absolute; top: 0px; left: 0px;"><img alt="" src='/backdrop.png' /></div>
<div id="curtain" style="z-index: 2; position: absolute; top: 0px; left: 0px; background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;"> </div>
</div>
这篇关于在一个div上显示一个div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!