javascript - 为什么 z-index 没有效果？

Question

我需要文字在图像上方，所以我设置z-index为 10，图像设置为 5。

文字在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;
}

标签： javascriptcssreactjs

Answer 1

没有元素的元素z-index不起作用position

尝试：

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