VueJS（元素 UI）-> v-for 上相对 div 中的绝对定位 div
Posted
技术标签:
【中文标题】VueJS（元素 UI）-> v-for 上相对 div 中的绝对定位 div【英文标题】：VueJS (Element UI) -> absolute positioned div in relative div on v-for 【发布时间】：2018-09-25 13:48:17 【问题描述】：我尝试呈现一个<el-card> 项目列表，我对其应用了transition-group。
我有一个前后 <el-card> 在单击按钮时会翻转。
为了让翻转过渡看起来不错，我需要卡片具有这种样式：position: absolute; top: 0; left: 0 但问题是所有卡片都堆叠在一起。
如果我删除此样式，所有卡片会并排显示，但翻转效果会出现不良行为：back 项目在 front 项目下可见。
你可以找到一个例子here。
我正在寻求帮助来解决这个问题。
谢谢。
迈克尔
【问题讨论】：
我不明白look good 是什么意思。如果您将所有卡片设置为0,0，它们将位于0,0。你想完成什么？
实际上，过渡对我来说看起来不错（只是翻牌）。我的问题是我不希望我的卡片堆叠。您可能没有看到，但示例中有 3 张堆叠的卡片，我希望它们并排
您将它们绝对定位，所以它们当然会被堆叠起来。包装父级没有position: relative，因此它们都将绝对相对于<body> 元素定位。
【参考方案1】：
这是因为卡片的所有前后元素都相对于<body> 元素绝对定位。没有一个父母有position: relative，所以他们当然都会出现在页面的坐标（0,0）处。
您想要的是在父元素上实际使用position: relative，最好是在每张卡片级别上。给父类一个类，方便选择：
<div class="card" v-for="card in cards" v-bind:key="card">
然后你为父级分配一个固定的宽度和高度（这是180px，因为你已经为卡的正面/背面定义了相同的），并为它分配position: relative：
.card
position: relative;
width: 180px;
height: 180px;
概念验证修复：https://codesandbox.io/s/xjq08j5n1p
旁注：您仍然会意识到您的示例仍然存在问题，因为翻转卡片将翻转所有卡片。这是因为您将翻转状态存储在父应用程序实例上，而不是单个卡片级别。我建议您为每张卡片创建一个子组件，以便您可以单独存储它们的翻转状态。
【讨论】：
【参考方案2】：Terry's answer 非常准确。我只想添加工作功能的完整示例。
由于您已经声明了 .flipper 类，我用它来添加 position:relative 块：
.flipper
position: relative;
width: 180px;
height: 180px;
请记住，要使position:relative 起作用，必须设置大小。否则，由于.flipper 内部没有流入元素，其大小将为0。
另外，设置孩子的适当宽度
.front,
.back
width: 100%;
height: 100%;
position: absolute;
我们需要100%，因为我们已经在父级上设置了宽度。
我将flipCards 转换为布尔数组，并修改了flipCardSwitch 函数。
flipCardSwitch: function(index)
// needed because of https://vuejs.org/v2/guide/list.html#Caveats
this.$set(this.flipCard, index, !this.flipCard[index]);
当然，你需要更新on-click。
@click="flipCardSwitch(i)"
工作代码： https://codesandbox.io/s/71512v9qvx
【讨论】：
以上是关于VueJS（元素 UI）-> v-for 上相对 div 中的绝对定位 div的主要内容，如果未能解决你的问题，请参考以下文章