小程序day03
场景：实现二维码下方的按钮长按也可以出现识别二维码弹框
image.png
首先识别二维码只能在图片标签用
show-menu-by-longpres
思路：增加二维码图片padding的范围，再定位长按按钮的位置使其与图片padding重叠，最后还要提高图片层级z-index:100
.QR-code-img {
margin-top: 58rpx;
.QR-code {
display: block;
height: 404rpx;
width: 412.28rpx;
padding: 0 40rpx 234rpx 40rpx;
box-sizing: content-box;
z-index: 100;
}
}
问题：按钮使用了position:relative后弹框高度被撑高
image.png
原因：相对定位不脱离文档流，弹窗的box高度实际上应该是上面元素高度+下面元素高度+上下padding的值，所以应该用绝对定位
.bottom1 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
top: 536rpx;}
最后小问题，退出弹框被长按识别的padding覆盖了，只需要z-index: 200;使他层级更高就行
