絕對定位的內部div與父div的內容重疊

http://i.stack.imgur.com/AIGfo.jpg 絕對定位的內部div與父div的內容重疊

下面是3個嵌套div的示例。 -div0（color：green;） --div1（color：blue;） --- div2（color：yellow; opacity：0.4;）;

我的目標是在整個屏幕上設置黃色div的寬度（這個div裏面會有圖像），但是沒有藍色與div的重疊文本。到目前爲止，唯一給我能夠重疊外部div寬度的解決方案是絕對定位它，但它與父div（藍色）的內容重疊。任何想法如何能實現這一點，而不會重疊父div的內容？

body { 
 
\t margin: 0; 
 
\t background-color: black; 
 
} 
 

 
.outer0 { 
 
\t background-color: green; 
 
\t width: auto; 
 
\t height: auto; 
 
\t padding: 20px 30px; 
 
} 
 

 
.outer1 { 
 
\t background-color: blue; 
 
\t width: auto; 
 
\t height: auto; 
 
\t position: relative; 
 
} 
 

 
.inner { 
 
\t background-color: yellow; 
 
\t height: 50px; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t right: 0; 
 
\t opacity: 0.4; 
 
}

<div class="outer0"> 
 
\t <div class="outer1"> 
 
\t \t <p>Some text1</p> 
 
\t \t <div class="inner">Here will be image, that shouldn't clip text of parent div</div> 
 
\t \t <p>some text2</p> 
 
\t </div> 
 
\t </div>

來源

2015-06-02 ZmajOdNocaja

請提供您的職位本身的HTML和CSS。沒有人會爲你調試截圖。 – TylerH

是否，謝謝你的幫助。 – ZmajOdNocaja

類似的東西？

html, 
 
body, 
 
.green { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
p { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    z-index: 2; 
 
} 
 
.green { 
 
    background-color: green; 
 
    padding: 50px; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
    width: 900px; 
 
    margin: 0 auto; 
 
    padding: 20px; 
 
} 
 
.yellow { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 40px; 
 
    background-color: yellow; 
 
    z-index: 1; 
 
    -moz-transform: translate(0 -50%); 
 
    -ms-transform: translate(0 -50%); 
 
    -webkit-transform: translate(0 -50%); 
 
    transform: translate(0 -50%); 
 
}

<div class="green"> 
 
    <div class="blue"> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo.</p> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo.</p> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo.</p> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo.</p> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo.</p> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo.</p> 
 
    <div class="yellow"></div> 
 
    </div> 
 
</div>

來源

2015-06-02 13:55:07

這樣做的竅門，但我忘了提及，將在黃色div內的圖像，不應該打斷父母的div（藍色）內的文本。我編輯了第一篇文章並添加了代碼。 – ZmajOdNocaja

我不明白哪個行爲應該在黃色div中的圖像。也許你可以做一個模型來說明它。 –

這個想法是，藍色的div應該有一些長文本，並在其中的一些部分我想要添加圖像，這是在其他div與不同的背景顏色，但它的寬度應該比div寬藍色，黃色的寬度div應該跨越整個頁面（屏幕大小）。這裏有一個簡單的例子：http://i.imgur.com/mzedFrN.jpg – ZmajOdNocaja

絕對定位的內部div與父div的內容重疊

回答

相關問題