CSS定位的麻烦

Question

我有一个div和它里面的图片作为背景：

<div id="background"> 
    <img src="background.png" class="stretch" alt="" /> 
    <div class="header"> 
    <span>header</span> 
    </div> 
    <div class="picture"> 
    <img src="pic" alt="" /> 
    </div> 
</div> 

下面CSS：

#background { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0; 
} 

.stretch { 
    width:100%; 
    height:100%; 
} 

.header { 
    position: absolute; 
    left: 12px; 
    top: 18px; 
    font-family: Arial; 
    font-size: 14pt; 
    color: #3A4549; 
    margin-bottom: 
} 

这里有一个小提琴：http://jsfiddle.net/3j7vk/

我怎么能在标题下面添加图像而不指定绝对位置？ 现在它在背景图像下。谢谢！

Answer 1

这是你在追求什么？

http://jsfiddle.net/3j7vk/1/

Answer 2

是否有任何理由不只是将图像作为背景添加到div中？

#background { 
    background: url(background.png) no-repeat; 
    background-size: cover; 
    /*other rules*/ 
    } 

如果图像只是一个背景，它应该不会出现在标记中。

请参阅本页上的background-size property。

Answer 3

奇怪的是，你没有使用CSS的背景图像属性，但回答你的问题，你可以给元素z-index指定它们的顺序，并使它们显示在彼此之上。它只有被指定的位置属性时的作品，而不是使其成为绝对的，使其相对：

.stretch { 
    width:100%; 
    height:100%; 
    position: relative; 
    z-index: 1; 
} 

然后给它自己的你.header的z-index：

z-index: 2; 

但要说实话，在我看来，使用CSS的背景属性将是更好的选择。

Answer 4

好吧，如果你想使用img作为你的背景，你能做到这一点，像这样：

<div id="background"> 
    <img src="http://placekitten.com/g/600/600/" class="stretch" alt="" /> 
    <div id="container"> 
     <div class="header"> 
      <span>header</span> 
     </div>  
     <div class="pic"> 
      <img src="http://lorempixel.com/200/200/" alt="" /> 
     </div> 
    </div> 
</div>​ 

CSS：

#container { 
    position:absolute; 
    top:0; 
    left:0; 
} 
#background, .stretch, #container { 
    width: 100%; 
    height: 100%; 
} 
.header { 
    font-family: Arial; 
    font-size: 14pt; 
    color: #3A4549; 
    margin-bottom: 
} 
.pic 
{ 
    height: 114px; 
}​ 

小提琴：http://jsfiddle.net/JKirchartz/SrvyD/

这就是你的容器流中的一切就像一个普通的html文档，你不必定位一切。