product中为什么删除.product中的绝对定位会报错，另溢出隐藏是否可以不要

<template>
  <transition name="product">
    <div class="product">
      <header class="g-header-container">
        <product-header></product-header>
      </header>  
    </div>
  </transition>
</template>
 
<script>
import {getProductDetail} from 'api/product';
import ProductHeader from './header';
 
export default {
  name: 'Product',
  components:{
    ProductHeader
  },
  data(){
    return {
      products:{}
    };
  },
  created(){
    getProductDetail(this.$route.params.id).then(data => {
      console.log(data.data.item);
      this.products=data.data.item;
    });
  }
};
</script>
 
<style lang="scss" scoped>
@import "~assets/scss/mixins";
.product {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: $product-z-index;
  width: 100%;
  height: 100%;
  background-color: $bgc-theme;
}
.product-enter-active,
.product-leave-active {    
    transition: all 0.3s;
}
 
.product-enter,
.product-leave-to {
  transform: translate3d(100%, 0, 0);
}
.product-enter-to{
  transform: translate3d(0, 0, 0);
}
</style>

迷失的小麦 2020-04-12

源自：实战：Vue 完成分类、搜索页 3-3 项目作业

收起

3回答

好帮手慕星星 2020-04-13 18:01:45

同学你好，问题解答如下：

1、search页面使用定位的原因是遮盖住底部，底部用了定位，脱离文档流。search页面如果不用定位，下面就会被底部遮盖住一部分

并且底部也是不需要的，所以设置了定位进行覆盖。

2、路由做的并不是跳转，而是把指定路由里面的内容添加到router-view中，可以看一下浏览器中解析

在home中子元素中，所以需要定位覆盖在最上面。

自己再测试理解下，祝学习愉快！

收起回答

好帮手慕星星 2020-04-13 13:53:54

同学你好，product页面是home页面的一部分

所以子元素如果想要完全显示在所有元素最上面，就需要设置定位，脱离文档流，然后设置层级属性。

例如：

p子元素覆盖在最上面

自己可以再测试理解下，祝学习愉快！

收起回答

提问者迷失的小麦 #1

那search和home等4个页面是同一个级别的，为啥也要绝对定位

2020-04-13 13:57:25
提问者迷失的小麦 #2

home中的<router-view></router-view>打开的是二级路由，按理说打开之后跟一级路由home本身就没有关系了，既然没有关系为啥还要绝对定位

2020-04-13 14:15:20