Question

我创建了一个简单页面。我想有一个固定的标题，但内容是重叠的标题。我试图使用z-index和其他来自stackoverflow的解决方案，但没有任何效果。当我向下滚动时，“测试”段落在标题上重叠。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

div.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 100%;
}

header {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  min-height: 60px;
  max-height: 60px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #e2eaf3;
}

.content {
  margin-top: 60px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

<div class="wrapper">
  <header>
    <h2>App</h2>
    <i class="fas fa-bars"></i>
    <i class="fas fa-times"></i>
  </header>
  <nav class="mobile-nav">
    <ul>
      <li></li>
    </ul>
  </nav>
  <div class="content">
    <p>Test</p><br>
    <p>Test</p><br>
    <p>Test</p><br>
    <p>Test</p><br>
    <p>Test</p><br>
    <p>Test</p><br>
  </div>
</div>

Answer 1

重叠的原因是因为您没有将背景颜色应用于标题，从而使其对所有重叠内容都是透明的。您需要做的就是应用background-color来解决此问题：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

div.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 100%;
}

header {
  background-color: #fff;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  min-height: 60px;
  max-height: 60px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #e2eaf3;
}

.content {
  margin-top: 60px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

<div class="wrapper">
  <header>
    <h2>App</h2>
    <i class="fas fa-bars"></i>
    <i class="fas fa-times"></i>
  </header>
  <nav class="mobile-nav">
    <ul>
      <li></li>
    </ul>
  </nav>
  <div class="content">
    <p>Test</p><br>
    <p>Test</p><br>
    <p>Test</p><br>
    <p>Test</p><br>
    <p>Test</p><br>
    <p>Test</p><br>
  </div>
</div>

Answer 2

您可以尝试在标题中添加背景。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

div.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 100%;
}

header {
  display: flex;
  position: fixed;
  background:#fff;
  top: 0;
  left: 0;
  z-index: 1000;
  min-height: 60px;
  max-height: 60px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #e2eaf3;
}

.content {
  margin-top: 60px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

<div class="wrapper">
  <header>
    <h2>App</h2>
    <i class="fas fa-bars"></i>
    <i class="fas fa-times"></i>
  </header>
  <nav class="mobile-nav">
    <ul>
      <li></li>
    </ul>
  </nav>
  <div class="content">
    <p>Test</p><br>
    <p>Test</p><br>
    <p>Test</p><br>
    <p>Test</p><br>
    <p>Test</p><br>
    <p>Test</p><br>
  </div>
</div>

固定标题按内容重叠

2 个答案: