覆盖具有负顶边距的标题时隐藏的背景

Question

我正在尝试将标题重叠到图像上。但是背景隐藏在图像下方。 为什么会这样？

http://jsfiddle.net/YRDFB/

<div class="header">
<img width="100%" height="200px"  src="/path/to/image.jpg" />
<h1>Header Title</h1></div>


h1 {
    background: rgba(67,67,67,0.8);
    margin-top: -3em;
}

Answer 1

您是否正在寻找 Updated Fiddle

h1 {
background: rgba(67, 67, 67, 0.8);
position:relative;
z-index:9;
display:block;
width:100%;
padding:0;
color:#fff;
margin-top:-43px;
}

Answer 2

我们在这里有两个解决方案：

1. 使用display:inline-block并为width:100%设置h1，也可以在margin-bottom上使用否定img代替：

   h1 {
     background: rgba(67,67,67,0.8);    
     display:inline-block;
     width:100%;
   }
   img {
     margin-bottom:-4em;
   }
   

   Demo 1.

2. 将position:relative用于img并为其设置z-index:-1：

   h1 {
     background: rgba(67,67,67,0.8);    
   }
   img {
     margin-bottom:-4em;
     position:relative;
     z-index:-1; 
   }
   

   Demo 2.