带有叠加图像和文本的 html 横幅

Question

我正在寻找一种动态创建可以放置在其他页面上的横幅的方法。横幅包含一个背景图像、两个重叠图像和两个位于该背景图像之上的文本标签。

是不是只能用绝对定位来实现元素的叠加？我如何确保横幅本身相对放置在集成页面中？

我想我需要能够将绝对元素放在相对框中。这可能吗？

谢谢马库斯

Answer 1

这是可能的。包含元素需要有 position:relative 并且你想要放置的所有内部元素都需要有 position:absolute; 以及位置 x 和 y，如下所示: 顶部:10px； right:20px 或 bottom:10px;左:230px

例如:

CSS:

#banner_wrap {position:relative; width:860px; height:60px;}
#inner_element {position:absolute; top:10px; left:20px; width:40px; height:40px;}

HTML

<div id="banner_wrap">
   <div id="inner_element"></div>
</div>

如果您希望它们是动态的，那么您可以更改特定页面的 CSS。