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文檔，你不必定位一切。