Flexbox布局下图片悬浮元素背景不显示问题求助

Got it, let's break down why your overlay isn't covering the image and fix it step by step.

The core problem here is that z-index only works on positioned elements (elements with position: relative, absolute, fixed, or sticky). Right now both your <img> and <p> are using the default position: static, so their z-index values are being ignored entirely. Plus, since Flexbox doesn't play with floats, we need to adjust the positioning approach to make the overlay sit on top of the image.

Here's the adjusted solution: #

First, update your CSS with these key changes:

* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}
.dldoc p { 
  -moz-transition: all 0.3s ease; 
  -o-transition: all 0.3s ease; 
  -webkit-transition: all 0.3s ease; 
  -ms-transition: all 0.3s ease; 
  transition: all 0.3s ease; 
}
.docwrapper { 
  display: flex; 
  justify-content: space-between; 
  max-width: 100%; 
  height: 100%; 
}
.dldoc { 
  margin: .5em; 
  display: block; 
  text-decoration: none; 
  overflow: hidden; 
  min-width: 30vw; 
  height: 55vw;
  position: relative; /* Add this: creates positioning context for child elements */
}
.dldoc p { 
  height: 30vh; 
  background: #f0f; 
  padding: 0 8px; 
  text-decoration: none; 
  width: 100%; /* Fill the entire container width */
  z-index: 10; /* Higher z-index to sit above the image */
  position: absolute; /* Position absolutely relative to .dldoc */
  bottom: 0; /* Anchor to the bottom initially */
}
.dldoc strong { 
  text-transform: uppercase; 
  font-size: 7vw; 
  font-weight: bold; 
}
.dldoc em, .dldoc p { 
  font-size: 4.5vw; 
}
.dldoc:hover > p { 
  transform: translateY(-100%); /* Smoother animation than margin shifts */
}
.dlmap { 
  padding: 0; 
  height: 150px; 
  margin-bottom: 1em; 
}
.dlmap:hover, .dlmap:active { 
  top: 0; /* Fixed typo here */
}
.dldoc img { 
  z-index: 1; /* Lower z-index to sit under the overlay */
  height: 100%; /* Fill the .dldoc container */
  width: 100%;
  position: absolute; /* Position to cover the entire container */
  top: 0;
  left: 0;
  object-fit: cover; /* Optional: preserves image aspect ratio while filling space */
}
.dlmap img, .dlmap img { 
  width: 100%; 
}
.dlmap strong { 
  position: absolute; 
  top: 0; 
  left: 0; 
  padding: 5px; 
  color: #bbb; 
  background: #233; 
}
.dlmap a { 
  text-transform: uppercase; 
  left: 0; 
  z-index: 1; 
  position: absolute; 
  top: 150px; /* Fixed missing unit */
  height: 75px; 
  padding: 5px; 
  background: #233; 
  font-size: 1.5em; 
  text-decoration: none; 
  color: #7d1; 
  width: 100%; 
}
.dlmap a:hover { 
  background: #7d1; 
  color: #233; 
}

Key Changes Explained: #

• position: relative on .dldoc: This tells the absolute-positioned child elements (img and p) to use this container as their positioning reference.
• Absolute positioning for <img>: Makes the image fill the entire .dldoc space, and its lower z-index ensures it stays behind the overlay.
• Absolute positioning for <p>: Anchors the overlay to the bottom of the container by default, with a higher z-index to guarantee it sits on top of the image.
• transform: translateY(-100%) for hover: Uses hardware-accelerated animation for smoother transitions, avoiding layout shifts that come with margin changes.
• Fixed minor typos: Corrected invalid CSS values like top; and top: 150.

Your HTML can remain unchanged:

<div class="docwrapper">
<a href="#" class="dldoc" id="resumedl"><img src="https://i.imgur.com/eHu2WOp.png" alt="">
<p><strong>download</strong><br>test1<br>PDF<br><br><em>test text</em></p>
</a>
<a href="#" class="dldoc" id="foliodl"><img src="https://i.imgur.com/eHu2WOp.png" alt="">
<p><strong>download</strong><br>test2<br>ZIP<br><br><em>test text</em></p>
</a>
</div>

This setup keeps your image's scaling and perspective intact (since we're using an <img> tag instead of a background image) while ensuring the overlay properly covers the image on hover.

内容的提问来源于stack exchange，提问作者Sam