Html 使元素与图像重叠

我试图得到这个h1标签，里面有一个图像，以重叠它下面的div（包括它的子元素，它们在里面浮动）

使用负边距在Chrome和Safari中有效，但在Firefox或IE中不起作用。有趣的是，父div尊重我的意愿，允许自己重叠，但该div中的浮动图像不起作用。尽管我给了它一个z指数-1，但由于负的边际，它被推到了一边

HTML:

---

有没有一种方法可以在不完全定位图像的情况下使其工作？

您应该使用

位置：相对和
显示：块
使负边距有效
将图像绝对定位在
h1
中是最佳选择。如果你想重新定位图像，你可以给一些空白或填充。
负页边距和浏览器兼容性真的不是最好的朋友

.logo img {
    position: absolute;
}

如果你申请

header .banner {
    float: left;
}

这将修复IE和Firefox，但会破坏Chrome。
然后你可以使用黑客将这种风格应用到IE和Firefox上……但我不推荐这样做

@-moz-document url-prefix() {
    header .banner {float: left;}
}

<!--[if lte IE 9]>
<style>
    header .banner {float: left;}
</style>
<![endif]-->

@-moz文档url-prefix（）{
header.banner{float:left；}
}
我没有任何代码，但您已经完成了，这样您就可以将适用于您的代码放入。应该是这样的：

.banner {
  background: url(yourimage'surl) no-repeat 0% 0%;
  height: yourimage'sheight;
}

background: url(yourimage'surl) no-repeat 0% 0%, url(anotherimage) no-repeat 100% 100%, #888;

如果你需要更多的图像，甚至背景色/渐变，你可以用逗号将它们分开

比如：

.banner {
  background: url(yourimage'surl) no-repeat 0% 0%;
  height: yourimage'sheight;
}

background: url(yourimage'surl) no-repeat 0% 0%, url(anotherimage) no-repeat 100% 100%, #888;

请发布您的实际代码，而不是链接。你的链接将在短时间内消失，如果没有代码，你的问题将无法在将来帮助他人。使用图像作为背景怎么样？@arieljuod有趣的想法，我认为这将非常有效-它将成为一个WordPress网站，因此这可能会很棘手。这并不棘手，只需将图像设置为你的.banner的背景，没有重复和固定高度，这样图像就不会被剪切，然后你可以用背景位置定位背景，我可以添加一个JSFIDLE，但我没有时间了now@arieljuod-它必须是内联css，对吗？