css - 如何定位 VueJS 组件

Question

我有一个设计简介，要求我将红色组件（右侧）移动到红色框架/外壳（左侧）。

这两个类别/部分来自一个 REST-API，他们的孩子就在旁边。

[我试过的]

我尝试将红色组件绝对定位，但问题是如果它上面的组件内容增长。这两个组件将重叠。

我找不到确切的位置。（在 Y 轴上）

[我想要什么]

我希望也许我可以用来v-slot在左侧创建一个外壳/框架，然后我将右侧的组件模板化并将其交给左侧的外壳/框架。

任何帮助，将不胜感激。

提前致谢。

Answer 1

如果我理解正确，这就是你所需要的：
//抱歉纯 CSS，我只是不知道如何在 stackoverflow 片段框中插入 scss

const btn = document.querySelector('button')
const grid = document.querySelector('.grid')

btn.onclick = () => grid.classList.toggle('replaced')

.grid {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  column-gap: 20px;
  row-gap: 20px;
}

div {
  background: black;
}

div:nth-child(1) {
  order: 10;
}

div:nth-child(2) {
  order: 20;
}

div:nth-child(3) {
  order: 30;
}

div:nth-child(4) {
  order: 40;
  background: red;
}

.replaced div:nth-child(4) {
  order: 11;
}

<main class="grid replaced">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</main>


<button>toggle</button>