Z索引问题和CSS按钮 _大数据知识库

我正在建立一个固定的header网站。z-index设置为正1。但是，它覆盖了侧面的滚动条。
下面是我的问题的一个小规模例子：

html {
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  width: 100%;
}

body {
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

header {
  background-color: blue;
  position: fixed;
  width: 100%;
  z-index: 1;
}

main {
  background-color: yellow;
  top: 60px;
  position: relative;
}

button {
  cursor: pointer;
}

<header>
  <h1>This is the header.</h1>
</header>
<main>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <button>Button</button>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <button>Button</button>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
</main>

当我将header的z-index设置为负1，并将main的z-index设置为-2，以便标题位于main顶部时，main中的按钮现在不可点击。我已经设置了main的相对位置。
有没有办法修复header不覆盖滚动条，同时也不影响main的button。

如果你想要一个顶部固定的标题，不包含任何内容，包括滚动条，考虑使用position: sticky。这种方法意味着没有“魔术数字”，就像top: 60px的情况一样，并使布局更适应未来的变化：

html {
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  width: 100%;
}

body {
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flow-root;
  background-color: blue;
  width: 100%;
}

main {
  display: flow-root;
  background-color: yellow;
}

button {
  cursor: pointer;
}

<header>
  <h1>This is the header.</h1>
</header>
<main>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <button>Button</button>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <button>Button</button>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
</main>

如果你不想滚动条在标题的右边，你可以使用垂直的flex布局，让内容 Package 器增长/收缩到可用的空间，让内容 Package 器滚动而不是<body>：

html {
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  width: 100%;
}

body {
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

header {
  background-color: blue;
  z-index: 1;
}

main {
  background-color: yellow;
  flex: 1 1 0%;
  overflow-y: auto;
}

button {
  cursor: pointer;
}

<header>
  <h1>This is the header.</h1>
</header>
<main>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <button>Button</button>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <button>Button</button>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
</main>

否则，如果您真的只希望滚动条可见，那么您需要从header规则中的width: 100%值中减去滚动条的宽度。但是，您需要某种操作系统检测，可能还需要其他软件检测。这是因为至少在我使用的Windows 11上的Chrome上，滚动条是17px宽，但如果我没记错的话，macOS有覆盖滚动条（默认情况下），作为一个例子。在撰写本文时，请参阅适用于Windows 11上的Chrome的以下内容，但您可能会看到与其他软件配置的差距：

html {
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  width: 100%;
}

body {
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

header {
  background-color: blue;
  position: fixed;
  width: calc(100% - 17px);
  z-index: 1;
}

main {
  background-color: yellow;
  top: 60px;
  position: relative;
}

button {
  cursor: pointer;
}

<header>
  <h1>This is the header.</h1>
</header>
<main>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <button>Button</button>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <button>Button</button>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
  <h2>Just some text.</h2>
</main>

Z索引问题和CSS按钮

1条答案

相关问题

热门标签

最新问答