怎么新建MySQL数据库
发布时间：2022-05-23
作者：admin
阅读：681
阅读：681
这篇文章给大家分享的是“CSS中overflow:hidden失效什么原因，怎样解决”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。
现在大家对于CSS中overflow:hidden失效什么原因，怎样解决的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。
失效原因
今天在写轮播图的时候发现，overflow;hidden;竟然能失效，发现原因如下：父元素想要隐藏溢出的绝对定位的子元素，需要给父元素加一个定位;因为绝对定位的子元素会从内向外寻找有定位的父元素，找不到的话overflow:hidden;也会随之失效。
一探究竟
重要的事再说一遍，正如上述所言，overflow:hidden;失效的原因是：父元素想要隐藏溢出的绝对定位的子元素，需要给父元素加一个定位;因为绝对定位的子元素会从内向外寻找有定位的父元素，找不到的话overflow:hidden;也会随之失效。
下面我们来试试：
（1）
<style>
.wrapper{
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;
}
.content{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
当子元素为绝对定位时，很明显，overflow:hidden;失效了
（2）
<style>
.wrapper{
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;
position: relative;
}
.content{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
我们只要给父元素加上一个定位即可,absolue和relative都可以(不过注意如果定位是absolute的话父元素会影响y轴下方的元素),这样绝对定位的子元素就能找到这个父元素，overflow:hidden;也不会失效
现在大家对于CSS中overflow:hidden失效什么原因，怎样解决的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理