粘性元素重叠绝对定位元素

huangapple
go评论101阅读模式
英文:

Sticky element overlaps absolute element

问题

我想创建一个带有粘性导航栏和侧边栏的页面。只有内容区域不应该是粘性的。

导航栏应该有一个下拉按钮。问题是粘性侧边栏现在会重叠在下拉菜单上。如果下拉菜单有多个项目，您就无法单击其中一个项目。

有没有一种方法可以强制下拉菜单重叠在粘性侧边栏上？

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. var open = false;
  5. function toggle() {
  6.   open = !open;
  7.   if (open) {
  8.     document.getElementById('menu').classList.add('visible')
  9.   } else {
  10.     document.getElementById('menu').classList.remove('visible')
  11.   }
  12. }
  14. <!-- language: lang-css -->
  15. .parent {
  16.   display: grid;
  17.   grid-template-areas: "navbar navbar" "sidebar content";
  18.   position: relative;
  19. }
  21. .navbar {
  22.   height: 50px;
  23.   background: #0f0;
  24.   grid-area: navbar;
  25.   position: sticky;
  26.   top: 0;
  27. }
  29. .menu {
  30.   display: none;
  31.   width: 300px;
  32.   height: 300px;
  33.   background: #00f;
  34.   position: absolute;
  35. }
  37. .visible {
  38.     display: block !important;
  39. }
  41. .sidebar {
  42.   /* width: 200px; */
  43.   height: 100px;
  44.   background: #000;
  45.   grid-area: sidebar;
  46.   position: sticky;
  47.   top: 50px;
  48. }
  50. .content {
  51.   min-height: 1000px;
  52.   background-image: linear-gradient(red,orange,yellow,green,blue,indigo,violet);
  53.   grid-area: content;
  54. }
  56. <!-- language: lang-html -->
  57. <div class="parent">
  58.   <div class="navbar">
  59.     <button onclick="toggle()">Dropdown</button>
  60.     <div id="menu" class="menu"></div>
  61.   </div>
  62.   <div class="sidebar"></div>
  63.   <div class="content">
  65.   </div>
  66. </div>
  68. <!-- 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 -->

  1. var open = false;
  2. function toggle() {
  3.   open = !open;
  4.   if (open) {
  5.     document.getElementById(&#39;menu&#39;).classList.add(&#39;visibile&#39;)
  6.   } else {
  7.     document.getElementById(&#39;menu&#39;).classList.remove(&#39;visibile&#39;)
  8.   }
  9. }

<!-- language: lang-css -->

  1. .parent {
  2.   display: grid;
  3.   grid-template-areas: &quot;navbar navbar&quot; &quot;sidebar content&quot;;
  4.   position: relative;
  5. }
  7. .navbar {
  8.   height: 50px;
  9.   background: #0f0;
  10.   grid-area: navbar;
  11.   position: sticky;
  12.   top: 0;
  13. }
  15. .menu {
  16.   display: none;
  17.   width: 300px;
  18.   height: 300px;
  19.   background: #00f;
  20.   position: absolute;
  21. }
  23. .visibile {
  24.     display: block !important;
  25. }
  27. .sidebar {
  28. /*   width: 200px; */
  29.   height: 100px;
  30.   background: #000;
  31.   grid-area: sidebar;
  32.   position: sticky;
  33.   top: 50px;
  34. }
  36. .content {
  37.   min-height: 1000px;
  38.   background-image: linear-gradient(red,orange,yellow,green,blue,indigo,violet);
  39.   grid-area: content;
  40. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;parent&quot;&gt;
  2.   &lt;div class=&quot;navbar&quot;&gt;
  3.     &lt;button onclick=&quot;toggle()&quot;&gt;Dropdown&lt;/button&gt;
  4.     &lt;div id=&quot;menu&quot; class=&quot;menu&quot;&gt;&lt;/div&gt;
  5.   &lt;/div&gt;
  6.   &lt;div class=&quot;sidebar&quot;&gt;&lt;/div&gt;
  7.   &lt;div class=&quot;content&quot;&gt;
  9.   &lt;/div&gt;
  10. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 2

你需要将navbar的z-index设置为1。了解更多关于z-index CSS属性的信息。因此，navbar将变得可点击。

请参考下面的代码片段。

代码片段 1:

  1. .navbar {
  2.   height: 50px;
  3.   background: #0f0;
  4.   grid-area: navbar;
  5.   position: sticky;
  6.   top: 0;
  7.   z-index: 1; /* 添加 */
  8. }

额外说明

你的代码非常适合演示z-index。

如果运行代码片段 1，打开下拉菜单并单击链接，你将看到以下效果：

粘性元素重叠绝对定位元素

现在，还要添加以下CSS：

  1. .as-console-wrapper {
  2.   z-index: 2;
  3. }

代码片段 2:

  1. .navbar {
  2.   height: 50px;
  3.   background: #0f0;
  4.   grid-area: navbar;
  5.   position: sticky;
  6.   top: 0;
  7.   z-index: 1; /* 添加 */
  8. }
  10. /* 添加 */
  11. .as-console-wrapper {
  12.   z-index: 2;
  13. }

如果运行代码片段 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 -->

  1. var open = false;
  3. function toggle() {
  4.   open = !open;
  5.   if (open) {
  6.     document.getElementById(&#39;menu&#39;).classList.add(&#39;visibile&#39;)
  7.   } else {
  8.     document.getElementById(&#39;menu&#39;).classList.remove(&#39;visibile&#39;)
  9.   }
  10. }
  12. /* Added */
  13. const link = document.querySelector(&quot;a&quot;);
  14. link.addEventListener(&quot;click&quot;, () =&gt; {
  15.   console.log(&quot;Clicked&quot;);
  16. });

<!-- language: lang-css -->

  1. .parent {
  2.   display: grid;
  3.   grid-template-areas: &quot;navbar navbar&quot; &quot;sidebar content&quot;;
  4.   position: relative;
  5. }
  7. .navbar {
  8.   height: 50px;
  9.   background: #0f0;
  10.   grid-area: navbar;
  11.   position: sticky;
  12.   top: 0;
  13.   z-index: 1; /* Added */
  14. }
  16. .menu {
  17.   display: none;
  18.   width: 300px;
  19.   height: 300px;
  20.   background: #00f;
  21.   position: absolute;
  22. }
  24. /* Added */
  25. .menu a {
  26.   color: white;
  27. }
  29. .visibile {
  30.   display: block !important;
  31. }
  33. .sidebar {
  34.   height: 100px;
  35.   background: #000;
  36.   grid-area: sidebar;
  37.   position: sticky;
  38.   top: 50px;
  39. }
  41. .content {
  42.   min-height: 1000px;
  43.   background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
  44.   grid-area: content;
  45. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;parent&quot;&gt;
  2.   &lt;div class=&quot;navbar&quot;&gt;
  3.     &lt;button onclick=&quot;toggle()&quot;&gt;Dropdown&lt;/button&gt;
  4.     &lt;div id=&quot;menu&quot; class=&quot;menu&quot;&gt;
  5.       &lt;a href=&quot;#&quot;&gt;Click me&lt;/a&gt;
  6.     &lt;/div&gt;
  7.   &lt;/div&gt;
  8.   &lt;div class=&quot;sidebar&quot;&gt;&lt;/div&gt;
  9.   &lt;div class=&quot;content&quot;&gt;&lt;/div&gt;
  10. &lt;/div&gt;

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

  1. .as-console-wrapper {
  2.   z-index: 2;
  3. }

Snippet 2:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

  1. var open = false;
  3. function toggle() {
  4.   open = !open;
  5.   if (open) {
  6.     document.getElementById(&#39;menu&#39;).classList.add(&#39;visibile&#39;)
  7.   } else {
  8.     document.getElementById(&#39;menu&#39;).classList.remove(&#39;visibile&#39;)
  9.   }
  10. }
  12. /* Added */
  13. const link = document.querySelector(&quot;a&quot;);
  14. link.addEventListener(&quot;click&quot;, () =&gt; {
  15.   console.log(&quot;Clicked&quot;);
  16. });

<!-- language: lang-css -->

  1. .parent {
  2.   display: grid;
  3.   grid-template-areas: &quot;navbar navbar&quot; &quot;sidebar content&quot;;
  4.   position: relative;
  5. }
  7. .navbar {
  8.   height: 50px;
  9.   background: #0f0;
  10.   grid-area: navbar;
  11.   position: sticky;
  12.   top: 0;
  13.   z-index: 1; /* Added */
  14. }
  16. /* Added */
  17. .as-console-wrapper {
  18.   z-index: 2;
  19. }
  21. .menu {
  22.   display: none;
  23.   width: 300px;
  24.   height: 300px;
  25.   background: #00f;
  26.   position: absolute;
  27. }
  29. /* Added */
  30. .menu a {
  31.   color: white;
  32. }
  34. .visibile {
  35.   display: block !important;
  36. }
  38. .sidebar {
  39.   height: 100px;
  40.   background: #000;
  41.   grid-area: sidebar;
  42.   position: sticky;
  43.   top: 50px;
  44. }
  46. .content {
  47.   min-height: 1000px;
  48.   background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
  49.   grid-area: content;
  50. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;parent&quot;&gt;
  2.   &lt;div class=&quot;navbar&quot;&gt;
  3.     &lt;button onclick=&quot;toggle()&quot;&gt;Dropdown&lt;/button&gt;
  4.     &lt;div id=&quot;menu&quot; class=&quot;menu&quot;&gt;
  5.       &lt;a href=&quot;#&quot;&gt;Click me&lt;/a&gt;
  6.     &lt;/div&gt;
  7.   &lt;/div&gt;
  8.   &lt;div class=&quot;sidebar&quot;&gt;&lt;/div&gt;
  9.   &lt;div class=&quot;content&quot;&gt;&lt;/div&gt;
  10. &lt;/div&gt;

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

huangapple
  • 本文由 发表于 2023年6月1日 17:37:01
  • 转载请务必保留本文链接：https://go.coder-hub.com/76380540.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定