我似乎无法弄清楚为什么我的project-img-text-container超出了其父div project-image-container和project-img-main。我在project-image-container中添加了以解决这个问题，但它没有做任何事情，我正在画一个空白。我将两个容器设置为相对容器，因此在project-img-text-container设置为absolute时，不确定为什么#project-img-main {
position: relative;
margin: 0;
width: 100%;
height: auto;
}
#project-image-container {
width: 100%;
height: 100%;
position: relative;
}
#project-img-window {
max-height: 700px;
/*background: rgba(0,0,0,0);*/
width: 100%;
}
#project-img-text-container {
background: rgba(0,0,0,.7);
position: absolute;
width: 33%;
height: 100%;
left: 60%;
z-index: 99;
}
#project-img-text {
color: #FFF;
font-size: 2em;
}会失效。
任何人都明白为什么？
<div id="project-img-main">
<div id="project-image-container"><img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects">
<div id="project-img-text-container">
<div id="project-img-text">Test</div>
</div>
</div>
</div>{{1}}
答案 0 :(得分：3)
#project-img-text-container {
top:0;
}
当设置为绝对位置时，您需要在文档或包含元素中指定它的位置。
答案 1 :(得分：1)
如果您不打算使用已定义的高度，则position: relative单独无法保留该元素。由于project-img-text-container position属性值为absolute，因此您需要将top:0添加到其CSS块中。
#project-img-main {
position: relative;
margin: 0;
width: 100%;
height: auto;
}
#project-image-container {
width: 100%;
height: 100%;
position: relative;
}
#project-img-window {
max-height: 700px;
/*background: rgba(0,0,0,0);*/
width: 100%;
}
#project-img-text-container {
background: rgba(0,0,0,.7);
position: absolute;
width: 33%;
height: 100%;
top: 0; /* This has to be 0 to bring it up to the top */
left: 60%;
z-index: 99;
}
#project-img-text {
color: #FFF;
font-size: 2em;
}<div id="project-img-main">
<div id="project-image-container"><img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects">
<div id="project-img-text-container">
<div id="project-img-text">Test</div>
</div>
</div>
</div>
答案 2 :(得分：0)