Question

我试图让这个带有图像的h1标签与其下方的div重叠（包括它的子元素，它们在里面浮动）。

使用负边距适用于Chrome和Safari，但不适用于Firefox或IE。有趣的是，父div是尊重我的意愿，并允许自己重叠，但该div内的浮动图像不是。由于负利润率，它被推到了一边，即使我给它的z指数为-1。

HTML：

<header>
<h1 class="logo">
    <img src="images/blush-header-logo.png">
    <span>Blush Wedding + Lifestyle</span></h1>

    <nav>
    <h1 class="hidden">Navigation</h1>
    <ul>
    <li><a href="#">The Magazine</a></li>
    <li><a href="#">Featured Weddings</a></li>
    <li><a href="#">Vendors</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </nav>
    <div class="clear"></div>

    <div class="banner">
        <img src="images/blush-banner.jpg">
            <aside class="current-issue">
        <h2>Latest issue</h2>
        <h3>Spring &bull; Summer 2013</h3>
        <p>Featuring an exclusive interview....</p>
        <button href="#">Purchase Here</button>
            </aside>
            <div class="clear"></div>
    </div>
  </header>

CSS：

header{
    position: relative;
}

header h1, header li{
    float: left;
    position: relative;
}

header h1.logo{
    position: relative;
    top:0;
    left:0;
    z-index: 99;
    width: 220px;
    height: 183px;
    margin-bottom: 0;
}

header h1.logo span{
    display: none;
}

header .banner{
    margin-top: -21px;
    z-index: -5;
    position: static;
}

header .banner img{
    float: left;
    z-index: -1;
}

header .banner aside{
    padding: 70px 18px 0 18px;
    float: left;
    width: 28%;
}

http://pixeldesigns.ca/files/blush/index.html

有没有办法让它在没有绝对定位图像的情况下工作？

Answer 1

您应该使用position: relative;和display: block;来设置负边距

Answer 2

将图像绝对定位在h1内是最佳选择。如果您想重新定位图像，可以在一些边距或填充中给出。负边距和浏览器兼容性真的不是最好的朋友

.logo img {
    position: absolute;
}

如果你申请

header .banner {
    float: left;
}

这将修复IE和Firefox，但会破坏它的Chrome。然后，您可以使用hack将此样式仅应用于IE和Firefox ......但我不建议使用此

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

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

Answer 3

我没有任何代码，但您已经完成了，因此您可以放置适合您的代码。应该是这样的：

.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;

获取元素以重叠图像

3 个答案: