尽管-溢出：子图像从父母伸出来

问题描述

我似乎无法弄清楚为什么我的overflow; hidden无法正常工作。

我有父母：

.header {
  background-color: #d5014d;
  height: 65vh;
  overflow: hidden;
}

及其子代：

.img-circle {
  position: absolute;
  height: 85rem;
  width: 90rem;
  border-top-right-radius: 10%;
  border-bottom-right-radius: 45%;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  right: -100px;
  top: -10rem;
  overflow-y: visible;
  z-index: 1;
}

.main-sec-img {
  width: 100%;
  height: 88%;
  border-top-right-radius: 48%;
  border-bottom-right-radius: 48%;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
}

main-sec-img延伸到header之外吗？

我尝试将overflow: hidden;都放在无效的位置。

感谢您的帮助。

编辑添加的HTML：

<div class="header">
  <div class="logo">
    <img src="/static/img/logo.svg">
  </div>
  <div class="img-circle">
    <img class="main-sec-img" src="/static/img/0.jpg" alt="" />
  </div>
  <div class="wrapper">
    <div class="main-sec-align">
      <h1 class="mission-title">MISSION STATEMENT TEXT</h1>
    </div>
  </div>

解决方法

使用“”位置：相对；””

.header {
  background-color: #d5014d;
  height: 65vh;
  overflow: hidden;
  /*use this*/
  position: relative;
}