position component on top of fixed app.vue - css

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>

Answer 1

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>

Answer 2

You should also be able to use v-bind class to apply a class to a component already displayed on the page. That would give a similar result to what you see in WYSIWYG editors full page option.