Css 重叠本机上的图标

我希望在react native中有一个元素重叠到图像上。我是react native的新手，但可以用3行代码在CSS中实现这一点：

容器处于相对位置。 元素处于绝对位置+底部：20px

这是我的react本机代码和它的屏幕截图

     <ScrollView style={styles.container}>
      <Image
        style={styles.profileImage}
        source={{uri: blabla}}
      />
      <View style={styles.iconContainer}>
        <ActionIcon
          name={'mode-edit'}
          color={colorBrand}
          onPress={() => console.log('test')}
        />
      </View>
      <List containerStyle={styles.list}>
        <ListItem
          title={'Account Settings'}
        />
        <ListItem
          title={'Notifications'}
        />
        <ListItem
          title={'Terms & Conditions'}
        />
        <ListItem
          title={'Privacy Policy'}
        />
        <ListItem
          title={'Log Out'}
        />
    </ScrollView>

所以它看起来像：

所以看起来和我想要的一模一样。但是我不喜欢那种

zIndex

，也不喜欢那种负的

bottomMargin

我首先尝试将iconContainer的容器置于相对位置，然后将iconContainer置于绝对位置。但要让它显示出来，你必须设定一个高度。然后，您有一个全宽和设置高度的空白，图标位于右侧。这会将列表向下推，并添加一个大的空白

还有其他选择吗

---

Cheers

将css属性“position:”绝对“添加到要重叠的元素中。

我建议您将图像和图标包装在div中，然后使用positioncss

堆栈片段

.wrapper{
边缘底部：40px；
位置：相对位置；
显示：内联块；
}
.包装纸i{
位置：绝对位置；
右：20px；
底部：-25px；
宽度：50px；
高度：50px；
背景#5ab985；
字体大小：30px；
颜色：#fff；
文本对齐：居中；
线高：50px；
边界半径：50%；
}
.img{
显示：块；
}

编辑模式

这将起作用，为了调整重叠视图，您可以像在cssso中一样使用顶部、底部、左侧和右侧，您指的是类似于

iconContainer:{alignSelf:'flex end'，right:10，top:210，position:'absolute'}

。。。但是按钮在列表下，仍然需要zindex。而且我也不是特别喜欢那种方式。这意味着如果我更改照片的高度，我也必须更改

top:210

值。我希望它与元素的自然DOM位置相对，该位置应位于图片下方和列表上方。尝试在所有其他元素的最底部添加“笔”编辑图标，并使用上面提到的css属性。您也可以尝试将

marginTop:任何您喜欢的大小添加到相同的图标样式中。问题是关于react native这看起来像react for the web
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  profileImage: {
    height: 250
  },
  list: {
    borderTopWidth: 0,
    flex: 1,
    marginTop: 0
  },
  iconContainer: {
    alignSelf: 'flex-end',
    right: 10,
    bottom: 40,
    marginBottom: -60,
    zIndex: 1
  }
})