html – 在另一个的顶部显示一个div

前端之家收集整理的这篇文章主要介绍了html – 在另一个的顶部显示一个div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一些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;">&nbsp;</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;">&nbsp;</div>
</div>

猜你在找的HTML相关文章