绝对定位的内部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的内容重叠

回答

相关问题