失效原因
今天在写轮播图的时候发现，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;也不会失效
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
本文在github做了收录 https://github.com/Michael-lz... 在类电商类项目，往往...
简介 HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方工具实现的，现...
前言 在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现，而带角度的渐变...
1.字体属性 color，规定文本的颜色，如 div{color:red;} font-style，规定文本显...
在这篇文章中，我将解释关于Python的入口点。大多数人都知道入口点是您在setup.p...
最近，我开始升级网志了。 在修改模板的过程中，需要重写CSS样式表。正好看到ins...
标签的显示模式（重点） div和span标签 1.样式完全相同，标签不同，显示的结果完...
注：该表引自W3School教程 伪元素的分类及作用： 下面通过代码看下CSS 伪类修改i...
编者：本文讨论了互动设计在整个品牌传播链中应该担当的角色，由于原文是一篇理...
博客一歇就是半年，略惭愧...元旦假期各种惬意：打打Dota(悲催的输多赢少)、滑滑...
