前几天在研究微信小程序时发现一个非代码错误的问题：

关于代码

<!--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>

因此丢失的视图组件又出现在我的手机上！

但我不明白的是：为什么白色的文字在模拟器上可以显示，而在手机上却不显示？

因为是从零开始学习微信小程序开发，对一些CSS代码和属性不太懂，所以看了CSS参考书中的以下部分：

来自任何

并且它是它的

如果没有，则交给身体。

——“CSS3”

大致意思是，被修改的元素会从父节点中分离出来，并在最近的节点上进行定义。

带入代码：

视图组件与其分离，并定义在汽车面罩上。

回到我一开始的错误代码，我做了一个盲目的猜测：

在开发方面，修改后的元素被分离并在最近的节点处进行定义。

在移动设备上，修改的元素被分离并定义在最近的上层节点中。

手机上定义的白色文字不是丢失了，是被车载面罩遮住了……QAQ

由此我们就能推断出为什么会出现两种不同的结果。

综上所述

position:absolute;

修改后的wxml组件应该定义在需要覆盖的组件之后。