overflow：hidden 和定位问题

4号的iavn 2016-12-07 05:10:10

今天做焦点轮播图发现，父元素设置相对定位和overflow：hidden，子元素设置绝对定位。为什么子元素超出父元素部分还会隐藏掉？不是已经脱离文档流了吗？

...全文

1039 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_34096956 2017-04-23

打赏
举报

父元素设置相对定位和子元素设置绝对定位都会脱离文档流,所以它们两个相当于还在一个层级上面,因此设置了overflow:hidden还是会隐藏掉

xiaoqiu_net 2016-12-08

打赏
举报

你图片绝对定位还是相对父元素，还在父元素容器里面，父元素设置了overflow:hidden,肯定会隐藏呀。设置visible吧

黑色的寂寞 2016-12-08

打赏
举报

还在一个框里，所以还是会有这样的效果。

Luminous_dxx 2016-12-08

打赏
举报

脱离文档流也会受到到父元素的overflow影响。脱离文档流只不过是不使用默认的排版方式而已。

4号的iavn 2016-12-07

打赏
举报

引用 1 楼 webyellow 的回复:

去掉overflow:hidden，清除浮动用after伪类。

答非所问啊兄弟

daswcszxw 2016-12-07

打赏
举报

去掉overflow:hidden，清除浮动用after伪类。

失效原因今天在写轮播图的时候发现，overflow;hidden;竟然能失效，发现原因如下：父元素想要隐藏溢出的绝对定位的子元素，需要给父元素加一个定位;因为绝对定位的子元素会从内向外寻找有定位的父元素，找不到的话overflow:hidden;也会随之失效。一探究竟重要的事再说一遍，正如上述所言，overflow:hidden;失效的原因是：父元素想要隐藏溢出的绝对定位的子元素，需要给父元素加一个定位;因为绝对定位的子元素会从内向外寻找有定位的父元素，找不到的话overflow:hidden;也会随之失效。下面我们来试试：（1） <style> .wrapper{

overflow:hidden失效当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。我们在IE 6内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。解决这个bug很简单，在父元素中使用position:relative;即可解决该bug 我的办法：子元素设置绝对定位，父元素相对定位，这样overflow:hidden就不会失效了。 IE下CSS溢出隐藏失败(IE overflow:hidden失效) 复制代码代码如下:

这个系列课程会深入讲解Python的各种核心技术的原理和实现。这些技术是对我从事多年Python开发和教学经验的总结，以及很多学员和一线开发人员在工作和学习中遇到的各种技术问题的搜集和整理。同时还包含了各大技术论坛和问答社区（如stack overflow）的精彩问题的回答的总结和引申。

IE6/IE7下父元素有相对/绝对定位时，子元素在IE6和IE7下overflow:hidden;失效，下面与大家分享下导致以上问题发生的情况及解决方法

父元素的overflow:hidden失效问题 ios系统兼容问题问题描述：父元素存在定位，border-radius，overflow:hidden属性，子元素需要实现从左到右的动画，因为子元素是平行四边形，当平移到父元素的最右边的时候，子元素的右上角在安卓上面实现了隐藏但是在ios系统上面父元素的overflow:hidden没生效原因：其实就是父级设置圆角属性失效父元素使用border-radius和overflow:hidden做成圆形，子元素如果使用了transform属性，则父元

CSS

61,114

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章

overflow：hidden 和 定位问题

overflow：hidden 和定位问题