overflow:hidden / scroll不会隐藏所有子元素

最新推荐文章于 2022-11-15 19:40:21 发布

徐同保

最新推荐文章于 2022-11-15 19:40:21 发布

阅读量1.6k

点赞数 1

分类专栏： web前端前端技术分享文章标签： overflow:hidden / scroll不会隐藏所有

本文链接：https://blog.csdn.net/xutongbao/article/details/83651938

版权

web前端同时被 2 个专栏收录

735 篇文章 15 订阅

订阅专栏

前端技术分享

251 篇文章 3 订阅

订阅专栏

拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式；
内部溢出的元素是通过position:absolute绝对定位，并且该定位元素的包含块是设置overflow:hidden元素的父级元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>overflow:hidden / scroll不会隐藏所有子元素</title>
    <style>
    html,
    body {
        margin: 0;
    }
    .over-hidden{overflow:scroll; height:100px; font-size:14px; width:100px; border:2px dotted #ddd;}
    .outer{position:relative}
    .inner1{position:absolute; top:0;height: 200px; background:yellow;}
    .inner2{position:absolute; top:200px; background:pink;}  
    </style>
</head>

<body>
<div class='over-hidden'>
    <div class='outer'>
        <div class='inner1'>这是第一个盒子。这是第一个盒子</div>
    </div>
    <div class='inner2'>这是第二个盒子。这是第二个盒子</div>
</div>
</body>

</html>

徐同保

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
overflow:hidden / scroll不会隐藏所有子元素

拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式；内部溢出的元素是通过position:absolute绝对定位，并且该定位元素的包含块是设置overflow:hidden元素的父级元素&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; ...
复制链接

扫一扫