怎么让position:fixed相对于父元素定位？

Question

怎么才能够让横向滚动得同时，姓名这个标题固定在父元素得距离显示框得40px处，不跟随父元素一起滚动？这样滚动姓名就被隐藏掉了，各位有什么好的想法吗？

若是给标题设置position:fixed;不设置top值，只设设置left是能够实现，横向滚动标题能够达到预期得效果，但是若是纵向滚动后，效果就与想要的结果不一样了，他还是会固定在屏幕范围内，没有跟随父元素一起纵向滚动

视频展示为需要实现得效果，横向滚动title固定在某个位置，并且纵向滚动时tilte跟随父元素一起滚动。

需要实现得效果

参考table布局中的固定列进行了修改，会出现一个新的问题，触屏固定列的区域进行横向滚动是触发不了横向滚动的，触屏固定列之外的区域能够进行横向滚动
代码元素部分

<view class="box-rel">
    <view class="box-abs">
        <block v-for="(item, i) in dataList" :key="i">
            <view class="item-title" @click="toUrl(`/pages/home/add?dailyInfoId=`+item.dailyInfoId)">{{ item.projectName }}</view>
        </block>
    </view>
    <scroll-view :scroll-x="true" class="home-content" @scroll="onScroll">
        <view
            class="item-header"
            :style="{
                left: `-`+scrollLeft+`px`
            }"
        >
            <view class="hr item-header-1">Date</view>
            <view class="hr item-header-4">Category</view>
            <view class="hr item-header-5">Sub category</view>
            <view class="hr item-header-3">Hrs</view>
            <view class="hr item-header-6">Achievement</view>
            <view class="hr item-header-7">Activities</view>
        </view>
        <block v-for="(item, i) in dataList" :key="i">
            <view class="item" :style="{ width: 400 * 5 + 200 + 'rpx' }" @click="toUrl(`/pages/home/add?dailyInfoId=`+item.dailyInfoId)">
                <view class="item-box">
                    <view class="td item-info-1">
                        <text>{{ item.dailyTime || '-' }}</text>
                    </view>
                    <view class="td item-info-4">
                        <text>{{ item.jobTypeName || '-' }}</text>
                    </view>
                    <view class="td item-info-5">
                        <text>{{ item.subJobTypeName || '-' }}</text>
                    </view>
                    <view class="td item-info-3">
                        <text>{{ item.expenditureTime || '-' }}</text>
                    </view>
                    <view class="td item-info-6">
                        <text>{{ item.achievement || '-' }}</text>
                    </view>
                    <view class="td item-info-7">
                        <text>{{ item.activities || '-' }}</text>
                    </view>
                </view>
            </view>
        </block>
        <view class="more-box">
            <text>{{ moreText }}</text>
        </view>
    </scroll-view>
</view>

css样式部分

.home{
    .box-rel{
        position: relative;
        .box-abs{
            padding-top: 202rpx;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 40rpx;
            max-width: 200rpx;
            z-index: 1;
            .item-title{
                font-size: 34rpx;
                font-weight: bold;
                padding-top: 20rpx;
                height: 188rpx;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
    &-content{
        padding-top: 86rpx;
        overflow-y: auto;
        min-height: 100vh;
        background-color: #F5F7FA;
        &::-webkit-scrollbar {
            display: none;
        }
    }
    .item-header{
        position: sticky;
        top: 0;
        height: 86rpx;
        display: flex;
        flex-wrap: nowrap;
        margin-bottom: 32rpx;
        z-index: 1;
        .hr{
            padding: 0 20rpx;
            background-color: #fff;
            display: flex;
            flex-shrink: 0;
            height: 100%;
            align-items: center;
            justify-content: center;
            position: relative;
            &:not(:last-child){
                &::after{
                    content: '';
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 2px;
                    height: 32rpx;
                    background-color: #f7f7f7;
                }
            }
        }
    }
    .item{
        position: relative;
        margin-bottom: 32rpx;
        background-color: #fff;
        &-box{
            display: flex;
            flex-wrap: nowrap;
            .td{
                background-color: #fff;
                padding: 86rpx 20rpx 30rpx 20rpx;
                display: flex;
                flex-shrink: 0;
                height: 100%;
                align-items: center;
                justify-content: center;
                text{
                    width: 100%;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
            }
        }
        &-header-1,&-info-1{
            width: 200rpx;
        }
        &-header-2,&-info-2{
            width: 400rpx;
        }
        &-header-3,&-info-3{
            width: 400rpx;
        }
        &-header-4,&-info-4{
            width: 400rpx;
        }
        &-header-5,&-info-5{
            width: 400rpx;
        }
        &-header-6,&-info-6{
            width: 400rpx;
        }
        &-header-7,&-info-7{
            width: 400rpx;
        }
    }
}

Answer 1

position:fixed 元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
CSS position属性

想要横向的时候固定在那里，纵向滚动的时候跟随屏幕移走。

可以参考table布局中固定列和表头，把你想要固定的那一列名字列类比这个例子中的日期列，然后做一下相对定位，并且把名字列背景色透明。