我有一些HTML与两个div:
<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(“帷幕”)出现在“背景”之上。两个div的大小相同。但是,我不知道如何将第二个div放在另一个的顶部。
感谢您的帮助!
解决方法
使用CSS位置:绝对;其次是top:0px;左边0px;在每个DIV的style属性中。用任何你想要的替换像素值。
你可以使用z-index:x;设置垂直的“顺序”(其中一个是“顶部”)。将x替换为数字,较高的数字位于较低的数字之上。
以下是您的新代码的外观:
<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>