父元素overflow: hidden;子元素position: fixed;子元素溢出部分居然不显示。

来源：互联网发布：艺术学博士知乎编辑：程序博客网时间：2024/04/29 22:08

父元素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；

阅读全文

0 0

父元素overflow: hidden;子元素position: fixed;子元素溢出部分居然不显示。

父元素overflow: hidden;子元素position: fixed;子元素溢出部分居然不显示。

1、代码

2、浏览器效果

1）：谷歌浏览器（Google Chrome版本 62.0.3202.62（正式版本） （32 位））

2）：ie11浏览器

3、其它

4、说明

1）：谷歌浏览器（Google Chrome版本 62.0.3202.62（正式版本）（32 位））