在CSS网格中将div扩展到其父单元格之外

我的UI有问题

我正在为父容器使用CSS网格。单击时，网格的子/单元必须扩展到其单元之外

CSS网格上的每个子/单元的起点不同，但它们最终都会在屏幕上的相同区域/位置上展开。（

position:absolute

非常适合这样做，但我不能使用absolute）

子组件的扩展有一个转换，因此我不能使用

position:absolute

，因为在应用类或更改

position

属性时，它会立即从“相对”（CSS网格）更改为“绝对”，从而使转换无效，因为它会立即“捕捉”到位

我也不能使用负边距/左/右/上/下属性，因为所有子/单元格必须在屏幕上的相同区域/位置结束，尽管它们的起点不同

如果不使用绝对值

Parent.vue

<template>
    <div class="jobGrid myr">
        <job-cell v-for="job in jobs" :key="job.id" :job="job" />
    </div>
</template>

<style scoped>
.jobGrid {
    display: grid;
    grid-template-columns: 10vw 10vw 10vw 10vw 10vw 10vw;
    grid-template-rows: 13vw 13vw 13vw 13vw;
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    
    margin: auto;
    margin-top: 2%;
    width: 90%;
    height: 90%;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
}
</style>

.工作网格{
显示：网格；
网格模板列：10vw 10vw 10vw 10vw 10vw 10vw 10vw；
网格模板行：13vw 13vw 13vw 13vw；
栅柱间隙：50px；
网格行间距：50px；
保证金：自动；
利润率最高：2%；
宽度：90%；
身高：90%；
最大宽度：90%；
最高高度：90%；
溢出y：自动；
}

child.vue

<template>
    <div class="scene" @click="toggleJobData">
        <div v-bind:class="{ absolute: absolute, expand: expand}" >
            {{job.title}}
        </div>
    </div>
</template>

<style>
.scene {
    border: blue solid 1px;
    background: peru;
    width: 100%;
    height: 100%;
    transition: position 1s;
    z-index: 1;
}

.absolute {
    position: absolute;
}

.expand {
    transition: width 1s;
    transition-delay: 1s;
    width: 50%;
}

{{job.title}
.现场{
边框：蓝色实心1px；
背景：秘鲁；
宽度：100%；
身高：100%；
过渡：位置1s；
z指数：1；
}
.绝对的{
位置：绝对位置；
}
.扩大{
过渡：宽度1s；
过渡延迟：1s；
宽度：50%；
}

---

我当前的代码很混乱，因为我正在尝试多项操作，但我希望这能有所帮助。

您可以计算父容器的总宽度以及子容器的左侧位置。然后执行类似（parentWidth-childLeftPosition）的操作，这将为您提供孩子需要扩展的宽度。然后分配给孩子。

你能添加一些代码吗？这将有助于回答：）刚刚更新过@DebsYou可以计算父容器的总宽度以及子容器的左侧位置。然后执行类似于（parentWidth-childLeftPosition）的操作，这将为您提供孩子需要扩展的宽度。然后把它分配给孩子。我还没有完成代码，但它完全起作用了。谢谢耶！很高兴听到这个消息！我将添加这个作为答案。我最终完成了它，我必须使用.getBoundingClientRect（）获取相对于父网格视口的父子XY坐标，然后从子单元格中减去它。仍然没有绝对的定位，只是纯粹的相对。终于解决了这个5天的问题。再次感谢！