css - 将组件定位在固定的 app.vue 之上

标签 css vue.js vuejs2

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

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

路由器链路 1: link1

路由器链接 2: link2

路由器链接 3: link3

这是我当前的代码

应用程序.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>

最佳答案

您可以在 component3 的样式上使用“position: absolute”。你也可以给它一个更高的 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>

关于css - 将组件定位在固定的 app.vue 之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53212573/

相关文章:

javascript - Vue.js 代码无法在没有 CDN 的 html 上运行

javascript - IE11 + Vue-Cli + Webpack + Babel - SCRIPT1003 错误

javascript - 在 Vuejs 中观察 window.scrollY 的变化

javascript - 如何显示由onclick事件触发的div

javascript - 望实现矩形径向删除动画显示

css - 为什么我的 Wordpress 页面底部在 IE(而不是 Firefox)中被截断?

vue.js - Vue CLI 更新 cookie 或更新存储?

javascript - 组件数据函数返回的 Vue 2 数据未定义

javascript - Vue.js,如何从组件中填充 SweetAlert2 html 表单数据

HTML/CSS : Section + Aside Issue