Inline Style
In this approach, we employ inline styles in React to directly configure the z-index property within a component. The process entails creating a JavaScript object that holds the desired z-index value and subsequently applying it as a style attribute to the relevant component.
Example: In this example we are using the above-explained approach.
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="https://media.w3wiki.org/wp-content/uploads/20230816223829/geeksgforgeeks-logo-1.png" 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 to run the application:Open the terminal and type the following command.
npm start
Output:
How to Set z-index Value in React JS ?
This article explores setting the z-index attribute in React, a CSS property influencing the stacking order of HTML elements for visibility control. In React, adjusting the z-index attribute enables effective management of stacking contexts within the application.
We will discuss the following two approaches to set z-index values in React.
Table of Content
- Inline Style
- CSS Modules