孙元素被爷元素隐藏问题

孙(C)元素被爷(A)元素隐藏问题。

我定义C元素为绝对布局，B元素为相对布局，然后会被A元素隐藏，在不改变A元素的 overflow和position的情况下 有没有办法让C元素不被A隐藏，当然把C元素放到A元素外面就可以，但是C又要相对于B来定位。

img

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>Document</title>
    <style>
        body,
        html {
            height: 100vh;
            padding: 0;
            margin: 0;
        }
        .a{
            /*在实际项目中。overflow和position 无法改变 */
            overflow: hidden;
            position: relative;
            width: 130px;
            background-color: burlywood;
        }
        .b{
            
            width:100px;
            height:100px;
            position: relative;
            background-color: antiquewhite;
        }
        .c{
            position:absolute;
            width: 100px;
            height: 20px;
            background-color: blue;
            color:white;
            left:50px;
            top:0;
            padding:10px;
            /* z-index: 9999; */
        }
    </style>
</head>


<div class="a">
    A
    <div class="b">
        B
        <div class="c">CCCCCCCCCCCCCCCCCC</div>
    </div>
</div>

</body>

</html>

设置下z-index样式，这个是层深，遮挡问题一般都是这个属性解决

父级overflow: hidden; 子元素是会被影响的，需要实现什么布局效果