Occlusion caused by absolute positioning using position:absolute in reactNative

Just go to the picture above. The desired effect is to add a label to the upper right corner of the card:

 The effect obtained by position:absolute is not easy to take screenshots on Android, so I won’t put the picture. I just press it under the card and figure it out by yourself.

Solution:

1. Unlike the web, zIndex is not easy to use, and 999 is not easy to use either.

2. Found a new attribute (the one I haven’t used is new~): elevation

Above code:

  skuTagNew: {
    flex: 1,
    height: px2dp(35),
    paddingRight: px2dp(7),
    paddingLeft: px2dp(7),
    backgroundColor: 'rgb(255,80,0)',
    position: 'absolute',
    top: px2dp(0),
    right: px2dp(0),
    borderRadius: px2dp(8),
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 999, // 这是重点！
  },

Okay, now I feel comfortable