function Example() {
const BOX_ZINDEX = new FixedZIndex(1);
const STICKY_ZINDEX = new CompositeZIndex([BOX_ZINDEX]);
return (
<Box color="white" height={200} overflow="scroll" tabIndex={0}>
<Box height={500} marginTop={10}>
<Box>
<Sticky top={0}>
<Box
alignItems="center"
color="lightGray"
display="flex"
height={40}>
<Text>This should stick</Text>
</Box>
</Sticky>
<Box marginTop={10} position="relative">
<Text>Scroll</Text>
<Text>Keep scrolling</Text>
<Text>Scroll more</Text>
</Box>
</Box>
<Box>
<Sticky top={0} zIndex={STICKY_ZINDEX}>
<Box
alignItems="center"
color="lightGray"
display="flex"
height={40}
position="relative"
zIndex={BOX_ZINDEX}>
<Text>This should also stick</Text>
</Box>
</Sticky>
<Box marginTop={10}>
<Text>Still scrolling</Text>
<Text>Tadaaaaa</Text>
</Box>
</Box>
</Box>
</Box>
)
}