Why z-index has no effect?

Question

I need text be above the image, so I set z-indexto 10, and image to 5.

Text is in Navbar.

function ProductList2(props: OrganizationList2) {
  return (
    <div>
      <div className={styles.container1}>
        <Navbar />
        <img
          src="/Olovka_Studio_gyűrű_v2.png"
          width="100"
          height="140"
          className={styles.img1}
        />

.container1 {
  background-color: #12341b;
  position: relative;
  height: 38vw; /*543/1440*/
}

.img1 {
  position: absolute;
  right: 11vw; /*159/1440*/
  top: 0px;
  z-index: 5;
  height: 38vw;
  width: 24vw; /*372/1440*/
}

.container { /* <------------------ Inside Navbar*/
  display: flex;
  margin-left: 8vw; /*128/1440*/
  margin-right: 8vw; /*430/1440*/
  justify-content: space-between;
  max-height: 88px;
  z-index: 10;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index: _"Applies to: positioned elements"_ - and, is `.container` positioned in _any_ way here ...? — CBroe, Sep 16 '21 at 10:24
add ``position: absolute;`` or ``position: relative;`` to ``.container `` — Aman, Sep 16 '21 at 10:25

PRSHL · Accepted Answer · 2021-09-16T10:58:00.123

1

An element with z-index doesn't work without a position element

Try:

.div-with-z-index {
   position: relative /* Relative doesn't change the position of the element itself. */
}

edited Sep 16 '21 at 10:58

answered Sep 16 '21 at 10:25

PRSHL

1,359
1
11
30

Why z-index has no effect?

1 Answers1