我试图让这个带有图像的 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 • 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
有没有办法在不绝对定位图像的情况下让它工作?