How to set ChromePicker to go outside the Polaris Card border?

Question

I want the ChromePicker to go outside the Polaris Card border. I've tried using the following, but it didn't work:

style={{
    position: "absolute",
    zIndex: 9999,
    top: "38px",
}}

Here is a visualization of the problem:

Child component

<div
ref={colorPicker}
style={{
  position: "absolute",
  zIndex: 9999,
  top: "38px",
}}
>
  <ChromePicker
      color={
          backgroundColor?.length === 7
              ? backgroundColor
              : backgroundColorBackUp
      }
      onChangeComplete={handleChangeSetColor(nameKey)}
  />
</div>

Parent component

 <Card>
    <BlockStack>
        <FormLayout>
            <CustomColorPicker
              title="Group name color"
              nameKey="groupNameColor"
              handleChangeSetColor={handleChangeSetColor}
              backgroundColorBackUp={formik.values.groupNameColor}
              handleOpenSetColor={handleOpenSetColor}
              colorPagination={colorPagination}
              backgroundColor={dataBackUp.groupNameColor}
            />
          </FormLayout>
    </BlockStack>
</Card>