Text is collapsing on position absolute dropdown

Question

I'm building a search bar with a search suggestion dropdown, and to not push the other div down, I set the div to position absolute and the parent to position relative. The problem is that by doing that, all the suggestion text is colliding with each other, and I can't figure out why.

      <InputGroup flexDirection={'column'} w={{ base: '80%', md: '30%' }}>
        <Input value={value} onChange={handleChange} placeholder={title} />
        <InputLeftElement
          pointerEvents="none"
          children={<Icon as={FaSearch} />}
        />
        <Box position={'relative'}>
          {searchResult.length !== 0
            ? searchResult?.map(
                (
                  search: { name: string; image: string; contract: string },
                  index
                ) => (
                  <Box
                    position={'absolute'}
                    key={index}
                    w={'100%'}
                    border={'0.1px solid lightGrey'}
                    onClick={() => handleCollectionSearch(search?.contract)}
                    p={1}
                    display={'flex'}
                    justifyContent={'space-between'}
                  >
                    <Image
                      ml={3}
                      w={'30px'}
                      objectFit="contain"
                      src={search?.image}
                      alt="search"
                    />
                    <Text mt={1} p={2} textAlign={'center'}>
                      {search.name}
                    </Text>
                  </Box>
                )
              )
            : null}
        </Box>
      </InputGroup>

Answer 1

Your container is position:relative so you do not need to position the children as absolute. Just remove that position style and they should appear below each-other.