将组件定位在固定的 app.vue 之上答案

【问题标题】：position component on top of fixed app.vue将组件定位在固定的 app.vue 之上
【发布时间】：2018-11-08 16:56:24
【问题描述】：

我有一个拆分布局，就像您在以下示例屏幕中看到的那样。默认情况下，固定的应用程序 vue 内容占界面左侧的 40%，路由器视图占右侧的 60%。

现在的问题是：其中一个组件，在此示例中，路由器链接 3 应该是全屏的。我不知道路由器组件如何与应用程序 vue 重叠。它总是在它下面。

路由器链接1：

路由器链接2：

路由器链接 3：

这是我当前的代码

app.vue:

<template>
<div class="left">
  <router-link to="/link1">
  <router-link to="/link2">
  <router-link to="/link3">
</div>

// some content

<router-view></router-view>
</template>

<style>
.left {
  width: 40%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

组件 1 和 2：

<template>
  <div class="container">
  // same content
  </div>
</template>
<style>
.container {
  display: inline-block;
  margin-left: 40%;
  width: 60%;
  height: 100vh;
}
</style>

组件 3：

<template>
  <div class="container">
  // same content
  </div>
</template>
<style>
.container {
  display: inline-block;
  width: 100%;
  height: 100vh;
}
</style>

【问题讨论】：

标签： css vue.js vuejs2

【解决方案1】：

您可以在组件3的样式上使用“位置：绝对”。您还可以给它一个更高的 z-index 以使其显示在顶部。例如：

<template>
  <div class="container">
  // same content
  </div>
</template>
<style>
.container {
  display: inline-block;
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100vh;
}
</style>

【讨论】：

设置组件的绝对定位不是很麻烦吗？然后，在某种程度上，组件的那部分变得不依赖于组件其余部分的定位，或者我错了？
可以使用绝对位置。您将它绝对定位到父元素..因此它不应该能够偏离父元素的相对位置。

【解决方案2】：

您还应该能够使用 v-bind class 将类应用于页面上已显示的组件。这将产生与您在所见即所得编辑器整页选项中看到的结果相似的结果。

【讨论】：