In this article, we are going to learn about setting The Z-index Attribute in React, the z-index attribute is a CSS property used to control the stacking order of HTML elements. Elements with a higher z-index value appear in front of elements with lower values, affecting their visibility on the web page. In React, you have the option to set the z-index attribute, allowing you to manage the stacking context of elements within your application.
Syntax:
element {
z-index: value;
};
Property Value:
- element: The HTML element to which you want to apply the z-index.
- value: An integer value that determines the stacking order. Higher values bring elements to the front.
Prerequisites:
Steps to Create React Application:
Step 1: Create a react application by using this command
npx create-react-app <<My-Project>>
Step 2: After creating your project folder, i.e. reactProject-app, use the following command to navigate to it:
cd <<My-Project>>
Project Struture:
Approach 1: Inline Style
In this approach, we use inline styles in React to directly set the z-index property within a component. This method involves creating a JavaScript object that contains the desired value of z-index, and then applying it as a style attribute to the respective component.
Example: In this example we are using the above-explained approach.
App.js
Javascript
import React from 'react'; function App() { const containerStyle = { position: 'relative', textAlign: 'center', fontFamily: 'Arial, sans-serif', left: '30%', top: "30%", position: "absolute", }; const imgStyle = { position: 'absolute', left: '0', top: '0', zIndex: -1, // Lower z-index value boxShadow: '0px 0px 10px 0px black', borderRadius: "10px", width: 400, height: 400, }; const headingStyle = { zIndex: 1, // Higher z-index value padding: '10px', borderRadius: '5px', margin: '0', textShadow: '2px 2px 4px white', }; const textStyle = { margin: '10px', textShadow: '2px 2px 4px white', }; return ( <div style={containerStyle}> <h1 style={headingStyle}> The z-index Property </h1> <img src= width="100" height="140" style={imgStyle} alt="Image" /> <p style={textStyle}> The image is going to be positioned behind the heading because it has a z-index of -1. </p> </div> ); } export default App; |
Step 3: To Run Application: Open the terminal and type the following command.
npm start
Output:
Approach 2: CSS Modules
In this approach, CSS Modules separate the styles from the component logic. The styles are defined in dedicated CSS files, and React components import these styles and apply them using dynamically generated CSS class names. This particular approach supports modularity and maintainability by encapsulating styles and preventing conflicts with global CSS.
Example: In this example we are using the above-explained apporach.
App.js
Javascript
import React from 'react'; import styles from './MyComponent.module.css'; function App() { return ( <div className={styles.container}> <h1 className={styles.heading}> The z-index Property </h1> <img src= className={styles.image} alt="Image" /> <p className={styles.text}> The image is positioned behind the heading because it has a z-index of -1. </p> </div> ); } export default App; |
Create MyComponent.module.css file and then paste the following code
CSS
/* MyComponent.module.css */.container { position: absolute; text-align: center; font-family: 'Arial, sans-serif'; left: 30%; top: 30%; } .image { position: absolute; left: 0; top: 0; z-index: -1; width: 410px; height: 400px; } .heading { z-index: 1; padding: 20px; border-radius: 5px; margin: 0; text-shadow: 2px 2px 4px white; color: white; } .text { margin: 10px; text-shadow: 2px 2px 4px white; color: red; padding: 20px; font-size: 20px; } |
Output:
