我有一个拆分布局,就像您在下面的示例屏幕中看到的那样。默认情况下,固定应用程序 vue 内容占据界面左侧的 40%,路由器 View 占据右侧的 60%。
现在的问题是:组件之一,在此示例中路由器链接 3 应该是全屏的。我不知道路由器组件如何与应用程序 vue 重叠。它总是在它下面。
这是我当前的代码
应用程序.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/