隐藏绝对定位溢出父盒子的部分

~啾☘啾~

于 2020-08-31 21:16:27 发布

阅读量1.1k

点赞数

分类专栏：入门文章标签： css 定位

本文链接：https://blog.csdn.net/weixin_43228393/article/details/108329664

版权

入门专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

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

<head>
    <title>绝对定位溢出隐藏</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    h2 {
        color: gray;
    }
    .parent {
        width: 100%;
        height: 100px;
        background-color: black;
        position: relative;
        overflow: hidden;
        margin-bottom: 100px;
    }
    .parent1 {
        width: 100%;
        height: 100px;
        background-color: black;
        overflow: hidden;
    }
    .child {
        position: absolute;
        width: 90%;
        height: 200px;
        font-size: 2vw;
        background-image: linear-gradient(#e66465, #9198e5);
    }
</style>

<body>
    <h3>需求: 设置绝对定位的同时让overflow:hidden生效</h3>
    <h2>解决方法: 设置父盒子position:relative</h2>
    <div class="parent">
        <div class="child">父盒子设置相对定位</div>
    </div>
    <div class="parent1">
        <div class="child">父盒子未设置相对定位</div>
    </div>
</body>

</html>

~啾☘啾~

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
隐藏绝对定位溢出父盒子的部分

<!DOCTYPE html><html lang="en"><head> <title>绝对定位溢出隐藏</title></head><style> * { margin: 0; padding: 0; } h2 { color: gray; } .parent { width: 100%; .
复制链接

扫一扫