CSS中overflow:hidden失效什么缘故怎样解决

发布时间：2023-09-01 14:33:56 所属栏目：语言来源：

导读：这篇文章给大家分享的是“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;也不会失效

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!