Question 195978 in Html Question posted in
Some basic documentation can be found here.

Html – Absolute element is behind sticky element and z-index does not work

I have :

<body>
  <div class="wrapper">
    <div class="sidebar">
      <div class="button"></div>
      sidebar
    </div>
    <div class="content">
      <div class="header">header</div>
      <div class="body">body</div>
    </div>
  </div>
</body>

and the css:

.wrapper {
  display: flex;

  .sidebar {
    width: 200px;
    position: sticky;
    top: 0;
    background-color: red;
    height: 100vh;

    .button {
      position: absolute;
      top: 0;
      right: 0;
      translate: 10px 10px;
      width: 30px;
      height: 30px;
      background-color: black;
      z-index: 10;
    }
  }

  .content {
    flex-grow: 1;

    .header {
      position: sticky;
      top: 0;
      height: 56px;
      background-color: yellow;
    }

    .body {
      height: 3000px;
    }
  }
}

I want the .button is over the header, but:

enter image description here

the .button is behind .header. I tried to chang z-index but it not working. Both .sidebar and .header is position: sticky;.

I also tried something to find the problem out but nothing.

If I create an absolute element in .header, everything good.

How I can fix this

Tags:

2

Answers


  1. 0

    Try this it will solve your issue…Just add z-index -1 in .header
    class. I have mentioned in below code….hope it will work…let me know if not…Thank you…

          .wrapper {
        display: flex;
      }
        .sidebar {
          width: 200px;
          position: sticky;
          top: 0;
          background-color: red;
          height: 100vh;
        }
          .button {
            position: absolute;
            top: 0;
            right: 0;
            translate: 10px 10px;
            width: 30px;
            height: 30px;
            background-color: black;
            z-index: 10;
          }
        

        .content {
          flex-grow: 1;
        }
          .header {
            z-index: -1;
            position: sticky;
            top: 0;
            height: 56px;
            background-color: yellow;
          }

          .body {
            height: 3000px;
          }
    <div class="wrapper">
      <div class="sidebar">
        <div class="button"></div>
        sidebar
      </div>
      <div class="content">
        <div class="header">header</div>
        <div class="body">body</div>
      </div>
    </div>
    Login or Signup to reply.
  2. 0

    I made some changes to your code to ensure that the button is positioned inside the header div but still above it:

    HTML

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="sidebar">
        sidebar
      </div>
      <div class="content">
        <div class="header">
          header
          <div class="nav-buttons">
            <div class="button"></div>
            <div class="button"></div>
            <div class="button"></div>
          </div>
        </div>
        <div class="body">body</div>
      </div>
    </div>
  </body>
</html>

    Here I created a new div "nav-buttons" presuming that the header will have more buttons (if not just remove the other buttons).

    CSS

    .wrapper {
  display: flex;
}

.sidebar {
  width: 200px;
  position: sticky;
  top: 0;
  background-color: red;
  height: 100vh;
  z-index: 10;
}

.content {
  flex-grow: 1;
}

.header {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 56px;
  background-color: yellow;
  z-index: 15;
}

.nav-buttons {
  display: flex;
  gap: 1rem;
  margin: 0.5rem;
}

.button {
  width: 30px;
  height: 30px;
  background-color: black;
  z-index: 20;
}

.body {
  height: 3000px;
}

    Here I added a display: flex and a flex-direction: column to your header because I don’t know if you want to keep the "header" placeholder, otherwise you can remove it. Also, I added a margin: 0.5rem to the nav-buttons div to give a space between them and the header, you can adjust it according to your needs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search