居中，分層和定位。我怎樣才能讓前景突然出現在背景的邊緣？

Question

我有以下的CSS，我試圖做的是背景比前景小，所以前景看起來好像它是爆裂的邊緣

header.png and center.png have更大的寬度比背景，但他們自己必須是背景圖像，因爲他們將文字分層頂部

現在我已經嘗試使用Z索引，但由於某種原因，前景圖像仍然保持移動42px到然後，我通過left：-42px定位了前景圖片，並且坐在前景div中的文本將不會放在我想要的位置。因此，下面的CSS已重置爲我的默認設置。

#wrapper { /* Used for centering the webpage */ 
    width: 1044px; 
    display: block; 
    margin: 0 auto; 
} 

#container { /* Used for background image */ 
    width: 960px; 
    display: block; 
    margin: 0 auto; 
    overflow: auto; 
    backgorund: url(images/bg.png) 
} 

/* Foreground Images */ 

h1 { 
    width: 1044px; 
    height: 196px; 
    display: block; 
    margin: 0 auto; 
    background: url(images/header.png) no-repeat center; 
} 

#center_piece { 
    width: 1044px; 
    height: 492px; 
    display: block; 
    margin: 0 auto; 
    background: url(images/center.png) no-repeat center; 
} 

Answer 1

一個可能的解決方案是將每個「爆炸片」包裝在一個相對定位的元素中，然後讓你的h1和#center_piece完全位於其中。

演示：http://jsfiddle.net/KZeuN/

HTML：

<div id="wrapper"> 
    <div id="container"> 
     <div id="h1_origin"> 
      <h1>H1</h1> 
     </div> 
     <div id="center_piece_origin"> 
      <div id="center_piece"> 
       Center Piece 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

#wrapper { /* Used for centering the webpage */ 
    width: 1044px; 
    display: block; 
    margin: 0 auto; 
} 

#container { /* Used for background image */ 
    width: 960px; 
    display: block; 
    margin: 0 auto; 
    /* remove overflow: auto; */ 
    background: url(images/bg.png) 


} 

/* Foreground Images */ 

h1 { 
    width: 1044px; 
    height: 196px; 
    display: block; 
    margin: 0 auto; 
    background: url(images/header.png) no-repeat center; 
    position: absolute; 
    top: 0; /* Adjust */ 
    left: -25px; /* Adjust */ 
} 

#center_piece { 
    width: 1044px; 
    height: 492px; 
    display: block; 
    /* remove margin: 0 auto; */ 
    background: url(images/center.png) no-repeat center; 
    position: absolute; 
    top: 0; /* Adjust */ 
    left: -25px; /* Adjust */ 
} 

#h1_origin { 
    position: relative; 
    height: 50px; /* Adjust */ 
} 

#center_piece_origin { 
    position: relative; 
    height: 50px; /* Adjust */ 
}