绝对定位标签溢出容器

请问我在将绝对定位的标签留在其父元素内时遇到问题,我尝试使父元素的高度与它工作的子元素的总高度相同,但是我可以解决它们的更好方法吗?以下结果的摘要

.team__members {
  width: 80%;
  display: flex;
  border: 2px solid #000;
}

.item__member {
  width: 24%;
}

.img {
  width: 100%;
  height: 100px;
  background-color: #000;
}

.item__member-info {
  position: relative;
}

.team__member-name {
  position: absolute;
}

a {
  position: absolute;
  display: block;
  text-decoration: none;
  color: #fff;
  background-color: #000;
}
<div class="team__members">
  <div class="team__member">
    <div class="img"></div>
    <div class="team__member-info">
      <div class="team_member-name">
        <h3>Katherine Wong</h3>
        <p>Facial & breast surgery</p>
      </div>
      <a href="#">view full profile</a>
    </div>
  </div>
</div>
&__member{
    width: 24%;

    img{
        width:100%;
    }
    &-info{
       position: relative;

        a{
        position: absolute;
        display: block;
        }
    }
    &-name{
        position: absolute;
        h3{

        }
        p{

        }
    }

}
评论