父元素overflow: hidden;子元素position: fixed;子元素溢出部分居然不显示。
1、代码
<!DOCTYPE html>
<html>
<body>
<style>
.detail-head {
height: 50px;
border-radius: 25px;
overflow: hidden;
position: relative;
}
.cut-img {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: #eee;
}
</style>
<div class="detail-head">
<div class="cut-img">
</div>
</div>
</body>
</html>
2、浏览器效果
1):谷歌浏览器(Google Chrome版本 62.0.3202.62(正式版本) (32 位))
2):ie11浏览器
3、其它
ie9
ie8
4、说明
父元素必须有属性
height: 50px;
border-radius: 25px; overflow: hidden; position: relative;
height可以改为width;height和border-radius值不为0;