子div元素绝对定位超出边界导致父div元素overflow：hidden失效（菜鸟混博客）

最新推荐文章于 2024-09-11 13:52:07 发布

chenguang4257

最新推荐文章于 2024-09-11 13:52:07 发布

阅读量1.8k

点赞数

原文链接：https://my.oschina.net/xiazilailai/blog/291695

版权

本文通过示例代码展示了当子div使用绝对定位后，超出父元素边界时，父元素的`overflow: hidden`属性失效的问题。探讨了绝对定位使元素脱离文档流，不受父级div约束的现象，并指出一个奇怪的现象：改变父元素颜色会影响到绝对定位的子元素文字颜色。

摘要由CSDN通过智能技术生成

下面是验证绝对定位导致父元素overflow：hidden失效的例子：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .bg{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        overflow: hidden;
    }
    .tu1{
        width: 50px;
        height: 50px;
        background-color: #9cf;
        position: absolute;
        top: 150px;
    }
    .tu2{
        width: 50px;
        height: 50px;
        background-color: #9cf;
        position: relative;
        top: 150px;
        left: 100px;
    }

    </style>
</head>
<body>
    <div>
        <div>图一</div>
        <div>图二<