html - 使用 HTML 和 CSS 将图像上的居中文本重叠在网格上

Question

https://codepen.io/LifuTao/pen/JZaVNX HTML:

<div id = "element">
  <div class = "item" id ="box_one"><img src = "https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/wp-content/uploads/2017/04/2018-BMW-M4-CS-PLACEMENT-626x383.jpg?crop=1xw:1xh;center,center&resize=450:*" id="bmw" class = "car overlay">
    <p class = "text">Wannabe Baller</p>
  </div>
  <div class = "item" id="box_two"><img src ="https://assets.mbusa.com/vcm/MB/DigitalAssets/Vehicles/ClassLanding/2018/S/Maybach/BASE/GALLERY/2018-MAYBACH-GALLERY-001-SET-A-WP.jpg" id="maybach" class = "car overlay"><p class="text">Savvy Entrepreneur</p></div>
  <div class = "item" id ="box_three"><img src="https://icdn-3.motor1.com/images/mgl/nvEe6/s1/2019-audi-a7-sportback-photo-shoot-in-olso.jpg" class = "car overlay" id="audi">
  <p class= "text">I'm not like the other guys</p></div>
  <div class = "item" id ="box_four"><img src = "https://files2.porsche.com/filestore/image/multimedia/none/911-carrange-jdp-2017/normal/2269da21-2995-11e7-9f74-0019999cd470/porsche-normal.jpg" class = "car overlay"id = "porsche"><p class= "text">I know a lot about cars</p></div>
  <div class = "item" id = "box_five"><img src ="https://jaguar.ssl.cdn.sdlmedia.com/636553494257956285DM.jpg?v=22" id = "jaguar" class = "car overlay"><p class = "text"> My car is the fastest in the land</p>5</div>
  <div class = "item" id = "box_six"><img src = "https://article.images.consumerreports.org/h_436,w_598/prod/content/dam/CRO%20Images%202017/Cars/October/CR-Cars-598-2018-Lexus-LS500-10-17" id = "lexus" class = "car overlay">
    <p class = "text">I'm better than them Toyota driving folks</p>
  </div>
</div>
THE CSS:

    #element{
  display: inline-grid;
  grid-template-columns: [one] 200px [two] 200px [three] 200px;
  grid-template-rows:200px 200px 200px;
  position:relative;
  left:200px;
  top:100px;

}
.item
{
  border: 1px solid red;
}
#bmw
{
  max-width:100%;
}
.item:hover
{
  transform:scale(1.5);
}
.overlay
{
  height:100%;
  width:100%;
}
.text
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color:yellow;
    max-width:100%;

}

代码在上面^。 我遇到的问题是，在网格的第 5 个框中，所有文本都混杂在一起，我不希望这样。 感谢您的帮助。

Answer 1

发生这种重叠是因为您正在使用 position absolute;在文字上。每CSS rules :

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

自<p> 的直系祖先以来元素，<div>与类 item , 没有位置，文本是相对于其下一个最接近的祖先 <div> 定位的与类 element .

为了得到你想要的效果，试着给你 item类 position: relative; .查看结果here .