html - 试图让横幅漂浮在盒子上并卡在上面

Question

我正在尝试让横幅图片位于带有文本的白框上方。我希望横幅图像漂浮并悬卡在每个边缘上，而不是受限于框 div 的大小。

我曾尝试将横幅制作成图像并对其进行绝对定位，但这并没有提供好的结果。该页面设计为响应式，虽然其他元素相应地缩小了，但图像仍然很大。

附件是我试图通过横幅实现的图像。一切都是编码的，这只是我无法正确的横幅。

非常感谢任何帮助!

谢谢，尼克

Answer 1

您可以:

1. 将 position:relative 应用到 banner 和 whitebox
2. 将 banner 的顶部向下移动(使用正的 px 值)...
3. (可选)将 whitebox 的顶部向上移动(使用负 px 值)

看例子:

.whitebox, .banner {
position: relative;
margin: 0 auto;
}

.banner {
width: 360px;
height: 45px;
border: 1px solid rgba(191,191,191,1);
}

.whitebox {
width: 300px;
height: 200px;
border: 1px solid rgba(127,127,127,1);
}

.banner {
top: 80px;
}

<div class="banner">
</div>

<div class="whitebox">
</div>