路由跳转不过去是因为层级？？？

光aaaaand影 2019-09-26

源自：实战：Vue webapp首页开发 4-3 热卖推荐--结构和样式

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2019-09-26 13:56:59

你好同学，不是跳转不过去，是因为层级不够显示不了。层级是小白入门阶段中的定位课程中涉及的，定位元素层级另一个定位元素层级小的时候，就会被挡住。使用z-index把层级设置高一点就行。

你可以运行源码看一下，当点击商品的时候，商品详情会显示出来，但是我们按F12找到z-inedx把它勾掉的时候，它就会首页的其他内容改盖住。当设置层级高一点的时候，就会显示在最上层

祝学习愉快，望采纳。

收起回答

光aaaaand影提问者 #1

我没有设置z-index，只设置了绝对定位，结果product被别的元素挡住了，虽然我知道加上z-index就好了，但是老师我想弄明白为什么product会被挡住，home页面中接受它的router-view明明在热卖推荐的后边，product不应该将上边的所有元素覆盖吗？老师我将代码和图片写在回答里，麻烦老师给我讲讲。

2019-09-26 17:42:01
光aaaaand影提问者 #2

老师我好像找到了原因，在滚动条组件的swiper-container上有一个内联样式z-index:1,这个是swiper组件封装好的？

2019-09-26 17:54:57
好帮手慕夭夭回复提问者光aaaaand影 #3

同学自己独立解决问题很棒！没错的，这个是swiper组件自己带的样式哦

2019-09-26 18:16:31

提问者光aaaaand影 2019-09-26 17:43:16

<template>
    <div class="product">
        product
    </div>
</template>

<script>
    export default{
        name:'product'
    }
</script>

<style scoped>
    @import "~assets/scss/mixins";
    
    .product{
        overflow:hidden;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:red;
        // z-index:$product-z-index;
    }
</style>