overflow失效的一种情况

来源：互联网发布：像instagram的软件编辑：程序博客网时间：2024/05/16 05:43

* 在实际开发中，遇到一种情况，在chrome浏览器环境中，overflow：hidden失效，网上查找了一下，没有发现相同的情况，因此分享出来，供大家参考*

鼠标移入左侧的图片时，右侧overflow：hidden失效。

很奇怪的一个问题，因为左侧的图片hover与右侧没有关系。但是右侧就会出现

<!doctype html><html class="no-js"><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="description" content="">  <meta name="keywords" content="">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>overflow失效的一种情况</title>  <style>  *{    padding: 0;    margin: 0;  }    .wrap{        width: 1110px;        margin: 0 auto;    }    .clearfix:after{        clear: both;        display: block;        content: '';    }    .clearfix{        zoom: 1;    }    .fl{        float: left;    }    .wrap .left{         width:210px; height:140px;         overflow: hidden;    }    .wrap .left img{          width:210px; height:140px;  -webkit-transition: -webkit-transform .3s ease;  -moz-transition: -moz-transform .3s ease;  -ms-transition: -ms-transform .3s ease;  transition: transform .3s ease;    }    .wrap .left img:hover {    transform: scale(1.2,1.2);    -ms-transform: scale(1.2,1.2);    -moz-transform: scale(1.2,1.2);    -webkit-transform: scale(1.2,1.2);    -o-transform: scale(1.2,1.2);}.billboard-left{    width: 64px;    height: 64px;    border: 2px solid #e9e9e9;    border-radius: 32px;    overflow: hidden;    position: relative;        margin-left: 100px;}.billboard-left div{    width: 64px;    height: 64px;    border-radius: 32px;    display: block;    overflow: hidden;    position: relative;}.billboard-left span{    position: absolute;    bottom: 0;    left: 0;        background: #000;    opacity: 0.5;    filter:alpha(opacity=50);      width: 100%;    height: 20px;} .billboard-left p{    font-size: 12px;    text-align: center;    position: absolute;    bottom: 0;    left: 0;    width: 64px;    height: 20px;    color: #fff;    overflow: hidden;} .billboard-left img{    width: 100%;    border-radius: 32px;}</style></head><body><div class="wrap clearfix">    <div class="left fl">        <img src="http://www.d1ev.com/d/file/contents/2016/03/56f8888645468.jpg" />    </div>    <div class="billboard-left fl">        <div>        <img src="http://www.d1ev.com/index.php?g=api&m=avatar&uid=4608&size=45" alt="">            <span class="billboard-left-span"></span>            <p>128篇</p>        </div>    </div></div></body></html>

解决办法
尝试了许多方法，下面的最简单

.billboard-left div {    z-index:1;}

疑问部分
1、不知道为什么会出现这种情况。哪位同学如果知道，谢谢说明一下。

0 0