0

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

使用负边距适用于 Chrome 和 Safari，但不适用于 Firefox 或 IE。有趣的是，父 div 尊重我的意愿，并允许自己重叠，但该 div 内的浮动图像不是。由于负边距，它被推到一边，即使我给它的 z-index 为 -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

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

4

3 回答 3

0

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

.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;
于 2013-09-04T18:27:52.323 回答
0

将图像绝对定位在您的内部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]-->
于 2013-09-03T23:51:47.200 回答
0

您应该使用position: relative;anddisplay: block;来使负边距起作用

于 2013-09-03T22:49:59.080 回答