如何疊加元素

Question

在嘗試了每個可能的位置變化之後：relative/absolute/etc和negative margin，我想知道是否有人可以告訴我如何獲得兩個綠色條以覆蓋標題圖像 - 頂部和底部 - 在http://itlaunchpad.patienceandfortitude.com/iphone-cant-get-your-email/。

*請注意，由於WordPress自定義圖像頭處理響應的方式，主標題必須保持爲img，而不能成爲背景屬性。

非常感謝！

Answer 1

將兩個柱絕對放置在共同的祖先元素內。例如：

​<header> 
    <nav><a href="#">Foobar</a></nav> 
    <img src="http://placekitten.com/640/200" /> 
    <nav><a href="#">Foobar2</a></nav> 
</header>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

並用以下的CSS：

​header { 
    position: relative 
} 
nav:nth-of-type(1) { 
    top: 0 
} 
nav:nth-of-type(2) { 
    bottom: 0 
} 
nav { 
    background-color: rgba(0,255,0,.25); 
    box-sizing: border-box; 
    position: absolute; 
    width: 100%; 
} 

它給你以下幾點：http://jsfiddle.net/M3jyV/

Answer 2

試試這個CSS

and make the inline css to external css its for your reference (inline css). 

bootstrap.css line 5416 

#masthead.container { 
    padding: 0; 
    position: relative; 
    width: 1198px; 
} 


app.css line 13 

#banner { 
    position: absolute; 
} 

bootstrap.css line 3779 

.navbar { 
    color: #777777; 
    overflow: visible; 
    position: absolute; 
    width: 100%; 
} 


<div class="container" style="width:100%"> 
<header style="margin-top: -40px;" class="navbar" role="banner"> 

看到圖像：

Answer 3

您可以使用CSS Z-index屬性

用於例 - http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

DEMO - http://jsfiddle.net/xY5Re/75/