父元素为relative，子组件是absolute，父组件允许滚动的时候，子

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

<div style="height: 300px;width: 100px;position: relative;border: solid;overflow-y: scroll;">
        <div style="height: 500px;background-color: lightgrey;"></div>
        <div style="width: 100%;height: 100px;background-color: lightgreen;position: absolute;top: 0;"></div>
    </div>

父组件由于可以滚动，所以他的实际高度不是300，而是500，子组件相对于父组件top:0固定，固定到了实际高度的top:0，我希望是按他实际高度固定，如何实现？

###

如果你想简单点，那直接父元素加一个啥也不干的transform属性：

transform: translateX(0)

然后absolute改为fixed，因为transform元素可以关住fixed元素让fixed相对自身定位而不是根元素。

或者让absolute升一级，成为当前父元素的兄弟元素，而它们共同的父元素使用relative。

###

换个思路

<!DOCTYPE html>
<html>
<head>
    <style>
    .box{
        height: 300px;
        border: 1px solid #ccc;
        overflow: hidden;
    }
    .content{
        height: calc(300px - 30px); /*box高度-title高度*/
        background: #f5f5f5;
        overflow: auto;
    }
    .title{
        background: #ccc;
        height: 30px;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="title">title</div>
        <div class="content">
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
        </div>
    </div>
</body>