英文:
Sticky element overlaps absolute element
问题
我想创建一个带有粘性导航栏和侧边栏的页面。只有内容区域不应该是粘性的。
导航栏应该有一个下拉按钮。问题是粘性侧边栏现在会重叠在下拉菜单上。如果下拉菜单有多个项目，您就无法单击其中一个项目。
有没有一种方法可以强制下拉菜单重叠在粘性侧边栏上？
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var open = false;
function toggle() {
open = !open;
if (open) {
document.getElementById('menu').classList.add('visible')
} else {
document.getElementById('menu').classList.remove('visible')
}
}
<!-- language: lang-css -->
.parent {
display: grid;
grid-template-areas: "navbar navbar" "sidebar content";
position: relative;
}
.navbar {
height: 50px;
background: #0f0;
grid-area: navbar;
position: sticky;
top: 0;
}
.menu {
display: none;
width: 300px;
height: 300px;
background: #00f;
position: absolute;
}
.visible {
display: block !important;
}
.sidebar {
/* width: 200px; */
height: 100px;
background: #000;
grid-area: sidebar;
position: sticky;
top: 50px;
}
.content {
min-height: 1000px;
background-image: linear-gradient(red,orange,yellow,green,blue,indigo,violet);
grid-area: content;
}
<!-- language: lang-html -->
<div class="parent">
<div class="navbar">
<button onclick="toggle()">Dropdown</button>
<div id="menu" class="menu"></div>
</div>
<div class="sidebar"></div>
<div class="content">
</div>
</div>
<!-- end snippet -->
英文:
I want to create a page with a sticky navbar and sidebar. Only the content area shouldn't be sticky.
The navbar should have a dropdown button. The problem now is that the sticky sidebar overlaps the dropdown menu. And if the dropdown has multiple items, you can't click on an item.
Is there a way to force the dropdown menu to overlap the sticky sidebar?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var open = false;
function toggle() {
open = !open;
if (open) {
document.getElementById('menu').classList.add('visibile')
} else {
document.getElementById('menu').classList.remove('visibile')
}
}
<!-- language: lang-css -->
.parent {
display: grid;
grid-template-areas: "navbar navbar" "sidebar content";
position: relative;
}
.navbar {
height: 50px;
background: #0f0;
grid-area: navbar;
position: sticky;
top: 0;
}
.menu {
display: none;
width: 300px;
height: 300px;
background: #00f;
position: absolute;
}
.visibile {
display: block !important;
}
.sidebar {
/* width: 200px; */
height: 100px;
background: #000;
grid-area: sidebar;
position: sticky;
top: 50px;
}
.content {
min-height: 1000px;
background-image: linear-gradient(red,orange,yellow,green,blue,indigo,violet);
grid-area: content;
}
<!-- language: lang-html -->
<div class="parent">
<div class="navbar">
<button onclick="toggle()">Dropdown</button>
<div id="menu" class="menu"></div>
</div>
<div class="sidebar"></div>
<div class="content">
</div>
</div>
<!-- end snippet -->
答案1
得分: 2
你需要将navbar的z-index设置为1。了解更多关于z-index CSS属性的信息。因此，navbar将变得可点击。
请参考下面的代码片段。
代码片段 1:
.navbar {
height: 50px;
background: #0f0;
grid-area: navbar;
position: sticky;
top: 0;
z-index: 1; /* 添加 */
}
额外说明
你的代码非常适合演示z-index。
如果运行代码片段 1，打开下拉菜单并单击链接，你将看到以下效果：
现在，还要添加以下CSS：
.as-console-wrapper {
z-index: 2;
}
代码片段 2:
.navbar {
height: 50px;
background: #0f0;
grid-area: navbar;
position: sticky;
top: 0;
z-index: 1; /* 添加 */
}
/* 添加 */
.as-console-wrapper {
z-index: 2;
}
如果运行代码片段 2，打开下拉菜单并单击链接，你将看到以下效果：
为什么？因为具有较大z-index的元素会覆盖具有较小z-index的元素。
英文:
You have to set z-index: 1; to the navbar. Read more about the z-index CSS property. Consequently, the navbar becomes clickable.
See the snippet below.
Snippet 1:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
var open = false;
function toggle() {
open = !open;
if (open) {
document.getElementById('menu').classList.add('visibile')
} else {
document.getElementById('menu').classList.remove('visibile')
}
}
/* Added */
const link = document.querySelector("a");
link.addEventListener("click", () => {
console.log("Clicked");
});
<!-- language: lang-css -->
.parent {
display: grid;
grid-template-areas: "navbar navbar" "sidebar content";
position: relative;
}
.navbar {
height: 50px;
background: #0f0;
grid-area: navbar;
position: sticky;
top: 0;
z-index: 1; /* Added */
}
.menu {
display: none;
width: 300px;
height: 300px;
background: #00f;
position: absolute;
}
/* Added */
.menu a {
color: white;
}
.visibile {
display: block !important;
}
.sidebar {
height: 100px;
background: #000;
grid-area: sidebar;
position: sticky;
top: 50px;
}
.content {
min-height: 1000px;
background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
grid-area: content;
}
<!-- language: lang-html -->
<div class="parent">
<div class="navbar">
<button onclick="toggle()">Dropdown</button>
<div id="menu" class="menu">
<a href="#">Click me</a>
</div>
</div>
<div class="sidebar"></div>
<div class="content"></div>
</div>
<!-- end snippet -->
Additional explanation
Your code is perfect to demonstrate the z-index.
If you run Snippet 1, open the dropdown and click on the link, you'll see the following:
Now, also add the following CSS:
.as-console-wrapper {
z-index: 2;
}
Snippet 2:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
var open = false;
function toggle() {
open = !open;
if (open) {
document.getElementById('menu').classList.add('visibile')
} else {
document.getElementById('menu').classList.remove('visibile')
}
}
/* Added */
const link = document.querySelector("a");
link.addEventListener("click", () => {
console.log("Clicked");
});
<!-- language: lang-css -->
.parent {
display: grid;
grid-template-areas: "navbar navbar" "sidebar content";
position: relative;
}
.navbar {
height: 50px;
background: #0f0;
grid-area: navbar;
position: sticky;
top: 0;
z-index: 1; /* Added */
}
/* Added */
.as-console-wrapper {
z-index: 2;
}
.menu {
display: none;
width: 300px;
height: 300px;
background: #00f;
position: absolute;
}
/* Added */
.menu a {
color: white;
}
.visibile {
display: block !important;
}
.sidebar {
height: 100px;
background: #000;
grid-area: sidebar;
position: sticky;
top: 50px;
}
.content {
min-height: 1000px;
background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
grid-area: content;
}
<!-- language: lang-html -->
<div class="parent">
<div class="navbar">
<button onclick="toggle()">Dropdown</button>
<div id="menu" class="menu">
<a href="#">Click me</a>
</div>
</div>
<div class="sidebar"></div>
<div class="content"></div>
</div>
<!-- end snippet -->
If you run Snippet 2, open the dropdown and click on the link, you'll see the following:
Why? Because elements with a larger z-index overlap those with a smaller one.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论