React Chakra UI Position

//Absolute.jsx

import { Box } from "@chakra-ui/react";

const AbsolutePositioningExample = () => {
  return (
    <Box bg='pink' position="relative" w='100%' height="200px">
      <Box p='24px' color='white' position="absolute" 
          top='30%' left='35%' backgroundColor="#ff5542" 
          borderRadius="sm" boxShadow="lg">
          I am absolute positioned WRT Light Pink box at Top: 30% and Left: 30%
      </Box>
    </Box>
  );
};

export default AbsolutePositioningExample;

// Fixed.jsx

import { Box } from "@chakra-ui/react";

const FixedPositioningExample = () => {
  return (

      <Box borderRadius='sm' w={'full'} p='24px' color='white' 
          position="fixed" bottom="0" backgroundColor="#4242ed">
          I am a Footer Fixed Positioning at Bottom: 0
      </Box>
  );
};

export default FixedPositioningExample;

// Relative.jsx

import { Box, Heading } from "@chakra-ui/react";

const RelativePositioningExample = () => {
  return (
    <Box mt={12} bg='gray' position="relative" w='100%' 
         height="200px" p='12px'>
      <Heading fontSize={'md'} color={'white'}>
           I am Relative reference to the green absolute box
      </Heading>
      <Box color='white' p='24px' borderRadius='sm' 
          position="absolute" top='30%' left="35%" backgroundColor="green">
          I am absolute WRT my Grey box Reference at Top: 30% and Left: 30%
      </Box>
    </Box>
  );
};

export default RelativePositioningExample;

// Sticky.jsx

import React from 'react';
import { Box } from '@chakra-ui/react';

const Sticky = () => {
  return (
    <Box
      position="sticky"
      backgroundColor="orange"
      width='full'
      boxShadow="md"
      textAlign="center"
      lineHeight="80px" // Vertical centering
    >
        This is a Sticky Navbar
    </Box>
  );
};

export default Sticky;

// App.js

import logo from './logo.svg';
import './App.css';
import AbsolutePositioningExample from './components/Absolute';
import FixedPositioningExample from './components/Fixed';
import RelativePositioningExample from './components/Relative';
import Sticky from './components/Sticky';

function App() {
  return (
    <div className="App" style={{
        margin: 'auto',
        width: '100%'
    }}>
        <Sticky/>
        <RelativePositioningExample/>
        <FixedPositioningExample/>
        <AbsolutePositioningExample/>
    </div>
  );
}

export default App;

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { ChakraProvider } from '@chakra-ui/react';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ChakraProvider>
    <App />
 </ChakraProvider>
);