css 绝对元素位于粘性元素后面，z索引不起作用

iugsix8n 于 2023-07-01 发布在其他

关注(0)|答案(1)|浏览(141)

我有：

<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>

关于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;
    }
  }
}

我希望.button在标题上，但是：

.button在.header后面。我试着改变z-index，但它不工作。.sidebar和.header都是position: sticky;。
我也试过一些东西来找出问题，但什么也没有。
如果我在.header中创建一个absolute元素，一切正常。
我该怎么弥补

css

来源：https://stackoverflow.com/questions/76572358/absolute-element-is-behind-sticky-element-and-z-index-does-not-work

1条答案

按热度按时间

wljmcqd81#

试试这个，它会解决你的问题...只需在.header类中添加z-index -1。我已经在下面的代码中提到了…希望它能起作用…如果不行请告诉我…谢谢…

.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>

赞(0）回复(0）举报 2023-07-01

我来回答

css 绝对元素位于粘性元素后面，z索引不起作用

1条答案

相关问题

热门标签

最新问答