粘性标题不适用于 z-index，阴影不断被其他内容隐藏

问题描述 投票：0回答：1

我有这个问题，在我的标题上，框阴影不可见，因为我的导航内容位于它上面，尽管我的标题有更高的 z-index。我不明白这里到底出了什么问题，这不应该起作用吗？这是我的问题的一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Element with Navigation</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .sticky-header {
            position: sticky;
            top: 0;
            z-index: 1000; /* Ensure this is high enough */
            background: white;
            box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);            
            padding: 10px;
        }

        .absolute-nav-wrapper {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            z-index: -1; /* Ensure this is lower than the sticky header */
        }

        .navigation {
            background: white;
            padding: 10px;
        }

        .content {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="sticky-header">
        Sticky Header
        <div class="absolute-nav-wrapper">
            <div class="navigation">
                Navigation Content
            </div>
        </div>
    </div>
    <div class="content">
        <p>Page content goes here...</p>
        <p>More content...</p>
    </div>
</body>
</html>

如果删除这部分：

<div class="absolute-nav-wrapper">
        <div class="navigation">
            Navigation Content
        </div>
 </div>

影子又出现了。

html css header sticky absolute
1个回答
0
投票

正如 meet 所提到的……你的 HTML 结构不是最好的。我为您提供了一个简单的semantic HTML 结构示例。您也可以将所有内容放入 

div
中并给它上课。但这使代码变得更干净一点。

让我们转向你的问题。由于这种糟糕的布局和一些不必要的属性，没有任何效果。不需要 

z-index
（只要没有其他元素带有 
z-index
）。尤其是用户想要与之交互的元素的 
z-index: -1
是一种糟糕的做法。 我只需要一个标题选择器即可使其与阴影和粘性行为一起使用。

这就是我从你的问题中能读到的全部内容。希望这个回答对你有帮助。

* {
  margin: 0;
  padding: 0;
}

.sticky-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #cecece;
  box-shadow: 5px 0 10px 1px #000;
  height: 5rem;
  padding: 1rem;
  position: sticky;
  top: 0;
}
<header class="sticky-header">
  <p>Sticky Header</p>
  <nav>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
  </nav>
</header>
<main>
  <div class="content-container">
    <h1>Hello World!</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <img src="https://placehold.co/600x400/EEE/31343C" style="margin: 5rem 0;">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</main>
<footer>
  <p>&copy; everyone who knows HTML</p>
</footer>

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.