如何让div覆盖它后面的整个div？
如何让div覆盖它后面的整个div？
提问于 2018-05-28 20:00:38
默认情况下，我尝试在页面上显示一个方形的div (红色方框)。当用户将鼠标悬停在它上面时，第二个div应该以半透明的黑色背景和一些文本/内容显示。我试着在他的网站上模仿Devon Stank's project section。
我现在的代码增加了默认正方形红色框的高度，第二个div没有覆盖整个红色框。代码有什么问题？
.project-box {
position: relative;
width: 30%;
padding-top: 30%;
overflow: hidden;
margin-right: 20px;
margin-bottom: 15px;
display: inline-block;
}
.default-box {
background-color: red;
}
.hover-content {
position: relative;
width: 100%;
height: 100%;
padding-top: 30%;
overflow: hidden;
display: inline-block;
}
.default-hover {
opacity: 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
background-color: rgba(0, 0, 0, 0.5);
}
.default-box:hover .default-hover {
opacity: 1;
}<div class="default-box project-box">
<div class="default-hover hover-content">hello</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-28 20:04:39
如果未定义父元素的height，则height: 100%;将不会对元素起作用。
此外，如果您坚持在父级上使用带有padding的position: relative，您将无法涵盖所有内容。
如果您想覆盖所有的父对象( .project-box )，而不管它的padding值，
我建议您在其子对象上使用absolute定位：
(我已经通过添加新类.veil完成了这项工作，但也可以在现有类中完成)
.project-box {
position: relative; /* ADDED so that the absolute positioning refers to this parent */
width: 30%;
padding-top: 30%;
overflow: hidden;
margin-right: 20px;
margin-bottom: 15px;
display: inline-block;
}
.default-box {
background-color: red;
}
.hover-content {
/* REMOVED position and sizes */
padding-top: 30%;
overflow: hidden;
display: inline-block;
}
.default-hover {
opacity: 0;
transition: 0.5s;
background-color: rgba(0, 0, 0, 0.5);
}
.default-box:hover .default-hover {
opacity: 1;
}
/* ADDED this class */
.veil {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}<div class="default-box project-box">
<!-- Added a class for the child here -->
<div class="default-hover hover-content veil">hello</div>
</div>
希望能有所帮助。
Stack Overflow用户
发布于 2018-05-28 20:34:33
这里，它可能会对你有帮助，试试吧。
.project-box {
position: relative;
width: 30%;
height:100%
}
.default-box {
background-color: red;
}
.hover-content {
position: relative;
width: 100%;
height: 100%;
text-align:center;
padding-top: 30%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50565965
复制相关文章
相似问题