position component on top of fixed app.vue

Question

I have a splitted layout, like you can see in the following example screens. By default the fixed app vue content takes 40% of the interface left and the router view 60% on the right.

Now the problem: one of the components, in this example router link 3 should be fullscreen. I don't know how the router component can overlap the app vue. It's always beneath it.

router link 1:

router link 2:

router link 3:

Here is my current code

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>

component 1 and 2:

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

component 3:

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

Jim B. Jim B. · Accepted Answer · 2018-11-08T17:03:23

You can use "position: absolute" on the style for the component3. You can also give it a higher z-index to make it appear on top. For example:

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

position component on top of fixed app.vue

2 Answers