问题描述
我似乎无法弄清楚为什么我的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;
}