文本与使用 overflow:hidden 重叠 div

Question

您好，我的 flexboxes div 文本与另一个 flex 容器重叠，我该如何解决这个问题，我已经尝试添加 overflow:hidden，但似乎不起作用。所以这是我的问题，这是 Whosebug 的额外文本“看起来你的 post 主要是代码；请添加更多详细信息。”问题。

.d-flex {
    display: flex;
    flex-wrap: wrap;

    flex-direction: column;
    width: 100%;/*can edit as per requirement*/
  }
  
  .d-flex .col {
    display: flex;
    flex-wrap: wrap;

    justify-content: space-between;
  }
  .section2{
    margin-bottom: 19px;
    margin-top: 19px;
  }

  .sectionact{

    margin-top: 19px;
  }
  .d-flex p {
    padding: 0 1rem;
  }
  .block{
      width: 300px; 
      height:200px;
      background-color:#191919;
      border-radius:60px;
      padding: 21px;
  }
  .flex-total {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
  }
  
  .flex-total .boxo {
    background-color: #191919;
    flex: 0 0 100%;
    max-width: 100%;
    margin: 10px;
    width: 100%;
    min-width: 235px;
    text-align:left;
  padding: 20px;
    font-size: 30px;
    border-radius:40px;
    min-height: 200px;
    height: 228px;
    
    overflow:hidden;
    padding: 27px;
  }



  @media (min-width: 1030px){
    .flex-total .boxo {
    flex: 0 0 51%;
    max-width: 46%;
    width: 100%;
    min-width: 20%;
    height: 345px;
  } }

.activegig1{
background-image: url(../images/laat.jpg)!important;
background-size: cover;
  background-position: center;
}
.activegig2{
  background-image: url(../images/laato.jpg)!important;
  background-size: cover;
    background-position: center;
  }
  .activegig3{
    background-image: url(../images/laatoo.jpg)!important;
    background-size: cover;
      background-position: center;
    }
    .activegig4{
      background-image: url(../images/laatooo.jpeg)!important;
      background-size: cover;
        background-position: center;
      }
.dategig{
  font-family: 'latoblack', Arial, sans-serif;
  font-weight: 900;
  color: #dadada;
  font-size: 47%;
  align-self: flex-end;
  margin: 0 !important;
  display:flex;
  text-shadow: 3px 3px 10px black;

}
.gigtitle{
  font-family: 'lato', Arial, sans-serif;
  font-weight: 900;
  color: #fff;
  font-size: 65%;
  text-shadow: 3px 3px 8px black;
position: absolute;
display: flex;

text-align: right;
margin: 0;


}
#bottom{
width: 100%;
height: 100%;
justify-content: end;
display: flex;
flex-wrap: wrap;
flex-direction: column;
text-align: left;
}

<div class="d-flex sectionact">
  <div class="col">

  <div class="sectiontitleactive">Active Projects</div>
  <a class="nounderline" href="projects">
  <div class="seeall">See all</div>
</a>
  </div>
  </div>
  <div class="flex-total">
  <div class="boxo activegig1 textgig"><div id="bottom"><h2 class="gigtitle">Lotsoftexttoshowtheoverflowhiddenproblemsopleaselookhereworld space Lotsoftexttoshowtheoverflowhiddenproblemsopleaselookhereworld</h2></div> <h5 class="dategig">JUN 2022</h5>
                </div>
  <div class="boxo activegig2 textgig"><div id="bottom"> <h2 class="gigtitle">No time to live a good life</h2></div><h5 class="dategig">DEC 2022</h5>
                </div>
  <div class="boxo activegig3 textgig"><div id="bottom"> <h2 class="gigtitle">I sea you</h2></div><h5 class="dategig">FEB 2023</h5>
                </div>  
  <div class="boxo activegig4 textgig"><div id="bottom"><h2 class="gigtitle">FOREST</h2></div><h5 class="dategig">MAY 2023</h5>
                </div>

  
</div>

Answer 1

尝试从 .gigtitle class 中删除 position: absolute;。

Answer 2

在您的样式表中，添加

 #bottom{
   position: relative;
 }

因为在这个 <div id="bottom"></div> 标签内的 header 标签 <h2 class="gigtitle"></h2> 中，您使用了 position:absolute。要么删除它，要么将 position: relative 添加到我之前描述的 parent 元素中。

然后 child 将相对于它的 parent div。请从此处了解有关“CSS 职位”的更多信息 - https://www.w3schools.com/css/css_positioning.asp

文本与使用 overflow:hidden 重叠 div

Text is overlapping div with using overflow:hidden

html

css

flexbox