关于uniapp简单层级的问题

问题描述

项目中有使用nvue编写APP，内容是在模板中写了几个，加上了定位，项目代码如下。

<template>
    <view style="position:relative;"></view>
    <view style="position:absolute;top:30px;"></view>
    <list>
	<cell v-for="val in 50">{{val}}</cell>
    </list>
</template>

效果就是第二个view组件在第一个view之上（还有些内容和长宽我没有写上去），但是效果就是这么个效果，但问题是，我第二个是一个view要放一个菜单，就是就是那种图标是三根横杠或者是三个点点，点击之后会弹出一个菜单，里面有个人信息，修改密码，退出登录这样的一个菜单，第二个view能在第一个view之上，没问题，不过list的内容却在我第二个view上，也就是说list的内容优先级高于我第二个view，我第二个view会被list覆盖。

怎么办呢？

通过设置position和z-indx来尝试去解决，但是不行。

原因是uniapp里面不知道为什么不能使用z-index，即便是写了也不会生效。

产生问题的原因

1、nvue不支持z-index，vue不知道
2、nvue页面的层级关系，是通过顺序来决定的

解决方法

将view定位改为position之后，由于脱离文档流，可以将位置设置在任意地方，层级的问题通过将元素放到页面根节点最后就行，因为元素靠后，优先级越高。