如何解决尽管-溢出:子图像从父母伸出来
我似乎无法弄清楚为什么我的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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。