试图让横幅漂浮在盒子上并悬空

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>