0
CSS：使用flexbox语法（vw，vh）在彼此之上叠加div？
.thumbnail{
\t padding: 0px 0px 0px 0px;
border:1px solid gray;
background-color: white;
border-radius: 5px;
margin: 5px 10px 5px 10px;
min-width: 10vw;
min-height: 40vh;
display: flex;
flex-direction: column;
cursor: pointer;
z-index: 1000;
}
.thumbnail_img{
\t width: 100%;
height: auto;
z-index: 1000;
}
p.caption_heading{
\t font-weight: bold;
line-height: 1em;
font-size: 20px;
}
span.caption_desc{
\t font-size:15px;
\t color: gray;
}
.caption{
\t flex-grow: 1;
\t z-index: 1000;
\t background-color: white;
}
.thumbnail_footer{
\t padding: 0px 10px 10px 10px;
\t background-color: white;
\t z-index: 1000;
}
.description{
position: absolute;
width: 12.7vw; /* as image */
height: 40vh; /* as image */
line-height: 200px; /* as image */
text-align: center;
text-decoration: none;
color: rgba(0, 0, 0, 0.0);
font-weight: bold;
z-index: 0;
border-radius: 5px;
background-color: rgba(252, 111, 27, 0.0);
transition: background-color 0.5s ease;
display: flex;
flex-direction : column;
}
div.description_heading {
\t font-size: 20px;
\t /* font-size: calc(4vw + 4vh + 2vmin); */
\t font-weight: bold;
\t line-height: 2em;
}
div.description_desc {
\t font-size: 15px;
\t line-height: 2em;
}
.thumbnail:hover .description {
\t position:absolute;
z-index: 1000;
display:block;
background-color: rgba(252, 111, 27, 0.9);
color: rgba(255, 255, 255, 0.9);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="flex_body" style="display: flex; flex-direction: row; justify-content: space-between; ">
<div class="thumbnail">
\t \t \t \t <div class="thumbnail_img">
\t \t \t <img class="thumbnail_img" src="./resources/img/size_minmuri1.jpg" alt="...">
\t \t \t </div>
\t \t \t <div class="caption">
\t \t \t <p class="caption_heading">Item name<br/>
\t \t \t <span class="caption_desc">Item description</span></p>
\t \t \t </div>
\t \t \t <div class="thumbnail_footer">
\t \t \t <a href="#" class="btn btn-primary" role="button">Read</a> <a href="#" class="btn btn-default" role="button">Button</a> \t
\t \t \t </div>
\t \t \t <!-- overlay item -->
\t \t \t <div class="description" href="#">
\t \t \t \t \t <div class="description_heading"><br>_____<br>Item name<br>_____</div>
\t \t \t \t \t <div class="description_desc">Item description</div>
\t \t \t \t \t
\t \t \t </div>
\t \t \t <!-- overlay item -->
\t \t \t </div>
</div>我一直在努力使效果，当用户在他们的鼠标移到一个div，它显示颜色叠加。效果很简单。然而，问题是我用flex，vw和vh，因为我想制作响应式网站。所以当我让div的大小完美匹配时，一旦浏览器大小变得不同于它们不匹配了。我试图在互联网上找到任何示例，但这些示例通常是固定的大小，包含px或位置。我想知道是否有方法在另一个div上覆盖color div。如果没有解决方案，我想我必须将网站重建为无响应。
这里是HTML
<div class="thumbnail">
<div class="thumbnail_img">
<img class="thumbnail_img" src="./resources/img/size_minmuri1.jpg" alt="...">
</div>
<div class="caption">
<p class="caption_heading">Item name<br/>
<span class="caption_desc">Item description</span></p>
</div>
<div class="thumbnail_footer">
<a href="#" class="btn btn-primary" role="button">Read</a> <a href="#" class="btn btn-default" role="button">Button</a>
</div>
<!-- overlay item -->
<div class="description" href="#">
<div class="description_heading"><br>_____<br>Item name <br>_____</div>
<div class="description_desc">item description</div>
</div>
<!-- overlay item -->
</div>
所以当用户将鼠标悬停他们的鼠标移到缩略图格，说明DIV应该出现并覆盖整个缩略图股利。
这里是CSS
.thumbnail{
padding: 0px 0px 0px 0px;
border:1px solid gray;
background-color: white;
border-radius: 5px;
margin: 5px 10px 5px 10px;
min-width: 10vw;
min-height: 40vh;
display: flex;
flex-direction: column;
cursor: pointer;
z-index: 1000;
}
.thumbnail_img{
width: 100%;
height: auto;
z-index: 1000;
}
p.caption_heading{
font-weight: bold;
line-height: 1em;
font-size: 20px;
}
span.caption_desc{
font-size:15px;
color: gray;
}
.caption{
flex-grow: 1;
z-index: 1000;
background-color: white;
}
.thumbnail_footer{
padding: 0px 10px 10px 10px;
background-color: white;
z-index: 1000;
}
.description{
background:rgba(252, 111, 27, 0.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
div.description_heading {
font-size: 20px;
font-weight: bold;
line-height: 2em;
}
div.description_desc {
font-size: 15px;
line-height: 2em;
}
.thumbnail:hover .description {
opacity: 1;
}
那么最初隐藏'.description'元素？那么它显示你什么时候把鼠标放在'.thumbnail'上？ – JakeParis
'vh'和'vw'单位总是相对于*视口*（因此名称：*视口高度*和*视口宽度*）。所以即使你能够在一个屏幕尺寸上将'vh'和'vw'尺寸匹配到你的div，当你重新调整屏幕尺寸时，这个布局将会崩溃，因为'vh' /'vw'没有任何关联div。 –
@JakeParis是的。 – camila