获取元素以重叠图像 [英] Getting an element to overlap an image

问题描述

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

使用负边距可在Chrome和Safari中使用，但不适用于Firefox或IE。有趣的是，父div是尊重我的愿望，并允许自己重叠，但该div内浮动的图像不是。由于负边界，它被推到了一边，尽管我已经给它一个-1的Z-索引。

HTML：

b
$ b

 < header> 
< h1 class =logo> 
< img src =images / blush-header-logo.png> 
< span> Blush Wedding + Lifestyle< / span>< / h1> 
 
< nav> 
< h1 class =hidden>导航< / h1> 
< ul> 
< li>< a href =＃>杂志< / a>< / li> 
< li>< a href =＃>精选婚礼< / a>< / li> 
< li>< a href =＃>供应商< / a>< / li> 
< li>< a href =＃>联络我们< / a>< / li> 
< / ul> 
< / nav> 
< div class =clear>< / div> 
 
< div class =banner> 
< img src =images / blush-banner.jpg> 
< aside class =当前问题> 
< h2>最新一期< / h2> 
< h3> Spring& bull; 2013年夏季< / h3> 
< p>采用独家采访......< / p> 
< button href =＃>在此处购买< / button> 
< / aside> 
< div class =clear>< / div> 
< / div> 
< / header> 
  

CSS：

  header {
 position：relative; 
} 
 
标题h1，标题li {
 float：left; 
职位：亲属; 
} 
 
 header h1.logo {
 position：relative; 
 top：0; 
剩下：0; 
 z-index：99; 
 width：220px; 
 height：183px; 
 margin-bottom：0; 
} 
 
标题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 {{b $ b padding：70px 18px 0 18px; 
 float：left; 
宽度：28％; 
} 
  

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

有没有办法让这个工作没有绝对定位的图像？

解决方案

我没有任何代码，但你已经做到了，所以你可以把你的代码工作。应该是这样的：

  .banner {
背景：url（yourimage'surl）no-repeat 0％0 ％; 
身高：yourimage'sheight;如果你需要更多的图像，甚至背景颜色/渐变，你可以将它们分开，如下图所示：
 
 $ / code> 

逗号

类似：

  background：url（yourimage'surl ）无重复0％0％，url（anotherimage）无重复100％100％，＃888; 
  

I am trying to get this h1 tag with an image inside to overlap the div below it (including it's child elements, which are floated inside).

Using a negative margin works in Chrome and Safari, but not in Firefox or IE. Interestingly the parent div is respecting my wishes, and allowing itself to be overlapped, but the floated image inside that div is not. It is getting pushed over to the side because of the negative margin, even though I have given it a z-index of -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

Is there a way to get this to work without absolutely positioning the image?

解决方案

I don't have any code, but you already done it so you can put the code that worked for you. Should be something like:

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

if you need more images or even background color/gradients you can separete them by comma

something like:

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

这篇关于获取元素以重叠图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！