React native position relative without moving other content

Question

I'm creating a custom modal that appears when you click a button, similar to a tooltip look but with selectable fields.

The problem i am having is that the modal is pushing the content below it down(out of its way) and i just want it to be over the top of everything.

I have used fragments to attempt to keep the modal on the same level as all the other elements and position relative to maintain the position of where it was clicked.

Here is without the modal visible:

Here is the modal pushing the content out of the way:

This is the structure of the button and the modal underneath it.

<>
  <View style={[styles.f_con]}>
    <Text style={[styles.f_title, item.required && styles.f_required]}>{item.title}</Text>
    <TouchableOpacity style={styles.d_btn} onPress={e => setVisible(true)}>
      <Text>{selection !== null ? item.options[selection] : 'Select from list'}</Text>
    </TouchableOpacity>
  </View>
  <SelectModal visible={visible} close={close} item={item} clear={() => makeSelection(null)}>
    {item.options.map((option, index) => (
      <TouchableOpacity style={styles.s_option_con} key={index} onPress={() => makeSelection(index)} value={option}>
        <Text style={styles.s_option_txt}>{option}</Text>
      </TouchableOpacity>
    ))}
  </SelectModal>
</>

This is my modal styling

modal: {
    position: 'relative',
    backgroundColor: Colors.secondaryBackground,
    top: -30,
    left: 100,
    height: 'auto',
    borderRadius: 12,
    width: 250,
    zIndex: 20
  }

Answer 1

I found the solution if anyone has a similar problem:

I restructured the item with the modal to have the modal as a child as follows:

<View style={[styles.f_con, { zIndex: 2 }]}>
      <Text style={[styles.f_title, item.required && styles.f_required]}>{item.title}</Text>
      <TouchableOpacity style={styles.d_btn} onPress={e => setVisible(true)}>
        <Text>{selection !== null ? item.options[selection] : 'Select from list'}</Text>
      </TouchableOpacity>
      <SelectModal visible={visible} close={close} item={item} clear={() => makeSelection(null)}>
        {item.options.map((option, index) => (
          <TouchableOpacity style={styles.s_option_con} key={index} onPress={() => makeSelection(index)} value={option}>
            <Text style={styles.s_option_txt}>{option}</Text>
          </TouchableOpacity>
        ))}
      </SelectModal>
</View>

I changed the position of the modal to position: 'absolute' and ensured the zIndex of the item was zIndex: 2 and all works.

Fragments unnecessary.