React Chakra UI Position - Coding

The Chakra UI library is a popular React UI library that helps build advanced and customizable user interfaces. One essential aspect of building UI is positioning the elements at the right positions on the screen.

Prerequisites:

Chakra UI Position props

position: specify the type of positioning
zIndex: specify the z-index of the element
top: specify the space from the top of the relative ancestor/viewport
right: specify the space from the right of the relative ancestor/viewport
bottom: specify the space from the bottom of the relative ancestor/viewport
left: specify the space from the bottom of the relative ancestor/viewport

This article will explain various approaches to position elements using Chakra UI.

Table of Content

Absolute Positioning
Fixed Positioning
Relative positioning
Sticky Positioning

Approach 1: Absolute Positioning

Absolute positioning helps you position an element relative to its closest parent or the document itself. The element does not affect the positions of other elements.

Syntax:

<Box position="absolute" top="50%" left="50%">
   {   /* Your content here */  }
</Box>

Approach 2: Fixed Positioning

Fixed positioning positions the element relative to the screen viewport. The elements remains fixed in its position even if the page is scrolled.

Syntax:

<Box position="fixed" top="0" left="0">
     {   /* Your content will come here */   }
</Box>

Approach 3: Relative positioning

Relative positioning is used as a reference to its absolute children elements. Relative positioning positions the elements at its normal position.

Syntax:

<Box position="relative">
  {   /* Your element at absolute positioning */  }
</Box>

Approach 4: Sticky Positioning

Sticky positioning lies somewhere between relative and fixed positioning. The element behaves as relative until a certain point, after which it becomes fixed in position.

Syntax:

<Box position="sticky" top="0">
  {   /* Your content will come here */   }
</Box>

Steps to Create a React App and Installing Module

Step 1: Create a new react app and enter into it by running the following commands:

npx create-react-app my-app
cd my-app

Step 2: Install the dependencies `@chakra-ui/react` by running the following command into the terminal:

npm i @chakra-ui/react

Project Structure:

Project Structure

The updated dependencies in package.json file will look like.

"dependencies": {    
    "@chakra-ui/react": "^2.8.2",    
    "@testing-library/jest-dom": "^5.17.0",    
    "@testing-library/react": "^13.4.0",    
    "@testing-library/user-event": "^13.5.0",    
    "react": "^18.2.0",    
    "react-dom": "^18.2.0",    
    "react-scripts": "5.0.1",    
    "web-vitals": "^2.1.4"
}

Example: Here is the implementation for the Chakra UI position.

Javascript

//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;

Javascript

// 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;

Javascript

// 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;

Javascript

// 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;

Javascript

// 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;

Javascript

// 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>
);

Output:

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
React Chakra UI Data Display Card
React Chakra UI Other Portal
React Redux Hooks: useSelector and useDispatch.
React Chakra UI Form Switch
How to create Breadcrumb Navigation Using React ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	12