How to set z-index on a React component?

Sometimes, we want to set z-index on a React component.

In this article, we’ll look at how to set z-index on a React component.

How to set z-index on a React component?

To set z-index on a React component, we set the position and zIndex properties of a component.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <>
      <div style={{ position: "relative", zIndex: "1" }}>bottom</div>
      <div style={{ position: "relative", zIndex: "2" }}>top</div>{" "}
    </>
  );
}

We set the position and zIndex properties to set the z-index of the divs.

The z-index property are enforced if position is set to absolute, relative, sticky or fixed.

Conclusion

To set z-index on a React component, we set the position and zIndex properties of a component.