英文:
Z-index Problems and Buttons CSS
问题
I'm building a website with a fixed header. The z-index is set to a positive 1. However, it covers the scrollbar on the side.
Here is a small-scale example of my problem:
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>
When I set the z-index of the header to negative 1, and set the z-index of the main to a -2 so that the header is on top of the main, the buttons within the main are now unclickable. I've already set the position of main relative as well.
Is there any way to fix the header not covering the scrollbar, while also not affecting the button of the main.
英文:
I'm building a website with a fixed header. The z-index is set to a positive 1. However, it covers the scrollbar on the side.
Here is a small-scale example of my problem:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
When I set the z-index of the header to negative 1, and set the z-index of the main to a -2 so that the header is on top of the main, the buttons within the main are now unclickable. I've already set the position of main relative as well.
Is there any way to fix the header not covering the scrollbar, while also not affecting the button of the main.
答案1
得分: 0
以下是您提供的内容的中文翻译：
如果您想要一个不遮盖任何内容（包括滚动条）的顶部固定标头，请考虑使用 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>这是标题。</h1>
</header>
<main>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<button>按钮</button>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<button>按钮</button>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
</main>
如果您不希望滚动条出现在标头右侧，您可以使用垂直弹性布局，让内容包装器增长/缩小以适应可用空间，并使内容包装器滚动而不是 <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>这是标题。</h1>
</header>
<main>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<button>按钮</button>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<button>按钮</button>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<h2>一些文本。</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>这是标题。</h1>
</header>
<main>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<button>按钮</button>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<button>按钮</button>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
<h2>一些文本。</h2>
</main>
英文:
If you are after a top-fixed header that does not cover any content, including scrollbars, consider using position: sticky. This method means there are no "magic numbers", as is the case with the top: 60px, and makes the layout more resilient to future change:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
If you do not want the scrollbar to be on the right of the header, you could use a vertical flex layout, and have the content wrapper grow/shrink to the available space and have the content wrapper scroll instead of the <body>:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Otherwise, if you really only want the scrollbar to be visible, then you would need to subtract the width of the scrollbar from the width: 100% value in the header rule. However, you would need to have some sort of operating-system detection and possibly other software detection. This is because at least on Chrome on Windows 11 that I am on, the scrollbar is 17px wide, but if I remember correctly, macOS have overlay scrollbars (by default), as a single example. See the following that works for Chrome on Windows 11 as of the time of writing, but you may see a gap with other software configurations:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论