css - React Native - 将底部图像带到顶层

Question

我有一个看起来像这样的自定义设计：

我想在三个条纹的顶部有一个“X”标记。当我做绝对定位时，它有效，但仅适用于它包含在 / 它被切断的位置。如何将“X”叠加在下面所有的顶部？

    <View style={styles.lightGrey}>
      <View style={styles.red}>
        <View style={styles.yellow}>
          <View style={styles.teal}>
            {!preview && (
              <TouchableOpacity
                onPress={async () => {
                  setIsLoadingDISLiked(true);
                  await onDisliked();
                  setIsLoadingDISLiked(false);
                }}
              >
                <MaterialCommunityIcons
                  name="close-thick"
                  size={34}
                  color="black"
                  style={{
                    marginLeft: Constant.width * 0.65,
                    marginTop: Constant.height * 0.01,
                    position: "absolute",
                  }}
                />
              </TouchableOpacity>
            )}
          </View>

造型

  red: {
    height: Constant.height * 0.08,
    width: Constant.width,
    backgroundColor: Colors.Brick,
  },
  yellow: {
    height: Constant.height * 0.08,
    width: Constant.width * 0.75,
    backgroundColor: Colors.LightMustardYellow,
  },
  teal: {
    height: Constant.height * 0.08,
    width: Constant.width * 0.7,
    backgroundColor: Colors.Teal,
  },
  lightGrey: {
    backgroundColor: Colors.LightLightGrey,
    paddingBottom: 100,
  },

Answer 1

您可以使用 z-index（react-native 中的“zIndex”）来选择哪个元素在您想要的图层上。CSS 指南：https ://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Answer 2

您可以将 x 图标放在主视图容器下作为最后一项position : 'absolute'

您的代码可能是这样的，请参阅世博小吃中的此代码

<View style={{flex : 1}}>

        <View style={{backgroundColor : '#ddd', height : 100}}>
            <View style={{backgroundColor : '#bbb', flex : 1, margin : 20}}>
                <View style={{backgroundColor : '#999', flex : 1, margin : 20}}>
                    <View style={{backgroundColor : '#666', flex : 1, margin : 20}}>

                    </View>
                </View>
            </View>
        </View>

        //put icon x here at last item in main container
        <View style={{
            position : 'absolute',
            top : 10, right : 10, height : 30,
            width : 30,
            backgroundColor : '#f00',
        }}>
            <Text style={{color : '#fff', alignSelf : "center", fontSize : 20}}>x</Text>
        </View>

    </View>

这就是结果