前几天在学习微信小程序发现了一个非代码错误的问题：
上代码
<!--wxml-->
<camera class='camera-cls'>
<cover-view class='cv-cls'>请将汽车车身置于取景框内哦~</cover-view>
<cover-image src='carBackground.png' class='cb-cls'></cover-image>
<cover-image src='shot.png' class='s-cls' bindtap='takephoto'></cover-image>
</camera>
/*wxss*/
page{
height:100%;
width:100%
}
.camera-cls{
height:100%;
width:100%
}
.cv-cls{
color: white;
position:absolute;
left:22%;
top:20%;
}
.cb-cls{
height:100%;
width:100%;
}
.s-cls{
position:absolute;
width:120rpx;
height:120rpx;
left:40%;
bottom:10%;
}
// js
/**
* 页面的初始数据
*/
data: {
},
takephoto:function(){
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality:'high',
success:(res)=>{
wx.setStorage({
key: 'photoCar',
data: res.tempImagePath,
})
wx.redirectTo({
url: '/pages/button/button',
})
}
})
},
在手机预览时缺少了一个view标签的组件。
在开发端模拟器的显示
在真机端的显示
（请忽略这个标题。。。练手的时候忘记改了。。。）
很明显，缺少了在小汽车图层上面的白字。
这个出乎意料的问题我询问了前辈，前辈说应该不能，可能是真机与模拟器的区别。
。。。。。。
好吧！我还是自己解决吧！
于是我想起我最喜欢的李兴华老师一句话：
“当你出问题的时候你一定要多试！”
其实学计算机的就应该是这样，多试试就能知道就能看明白其中的奥妙！（假鸡汤）
在wxss代码中网课老师说：
position:absolute;
只有绝对，才可以层叠。
我在想是不是层叠关系出现了问题呢？
于是我就把代码的位置变换了一下：
<camera class='camera-cls'>
<cover-image src='carBackground.png' class='cb-cls'></cover-image>
<cover-view class='cv-cls'>请将汽车车身置于取景框内哦~</cover-view>
<cover-image src='shot.png' class='s-cls' bindtap='takephoto'></cover-image>
</camera>
于是缺少的view组件就重新出现在我的手机上了！
可是我想不明白的是：为什么模拟器上就能显示那段白字，在手机上就显示不出来呢？
因为我是0基础就开始着手微信小程序的开发学习，所以有些css的代码、属性我是不懂的，就看了一下CSS参考书关于absolute的部分：
absolute
The position value absolute detaches the element from any containing
elements and allows it to be positioned relative to its nearest positioned
ancestor or to the document body if there are none.
——《CSS3 Quick Syntax Reference》 Mikael Olsson
大概的意思是absolute修饰的元素，会从父节点分离出来，并将其定义在最近的节点上。
带入代码：
view组件从camera中分离，并定义在汽车遮罩上。
回到我刚开始的错误代码，我盲目的猜测一波：
在开发端，absolute修饰的元素分离之后定义在最近的节点。
在手机端，absolute修饰的元素分离之后定义在最近的上一层节点。
手机端定义的白字不是缺少了，是被汽车遮罩挡住了。。。QAQ
这样就可以推理为什么会出现两种不同的结果了。
结论
position:absolute;
absolute修饰的wxml组件要定义在需要覆盖的组件之后。