Question

我需要帮助，以便在我正在编码的投资组合上的网格上创建导航栏。我有两个主要部分，一个导航栏和主要内容，我希望它是一个带有静态导航栏的全高滚动页面。

因为它们在第一行中重叠，所以如果我将内容放在z-index的前面，则可以滚动内容，但不能选择导航栏。反过来同样的问题。

我这样做正确吗？

简短说明：我希望我的内容在具有静态导航栏的同时在中间垂直滚动到边缘。由于它们当前在同一网格中重叠，因此我无法访问任何一个。

如果我将内容设置为第二行，则由于导航栏切出了我的内容，我的内容没有达到顶部。

我尝试在Nav中将其设置为绝对，但我觉得我违反了惯例

.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr .5fr 1fr;
  grid-template-rows: 1fr;
  grid-area: 100%;
}

.topnav {
  display: flex;
  align-items: baseline;
  min-height: 8vh;
  margin-left: 10%;
  margin-right: 10%;
  grid-column: 1 / span 4;
  grid-row: 1;
  z-index: 1;
}

#scrollcontent {
  overflow: scroll;
  height: 100vh;
  grid-column: 1 / span 4;
  grid-row: 1;
  z-index: 1;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  align-items: center;
  align-content: center;
}

<div class="wrapper">
  <div class="topnav">
    <div class="logo">
      <a href="About.html">
					Me
				</a>
    </div>
    <div class="navlinks">
      <a href="#work" id="work">WORK</a>
      <a href="About.html" id="about">ABOUT</a>
    </div>
    <div id="scrollcontent">
      <div class='column'>
        <div class='projimg1'>
          <img src="img/Hero%20image%20for%20projects(larger).png" alt="Project" class="responsive">
          <div class="proj1text">
            <h3>Heading</h3>
            <h3>Lorem Ispem abcdefg hijklmnop</h3>
          </div>
          /* list of projects */
        </div>
      </div>
    </div>

Answer 1

如果您使用z-index将.navlinks放在顶部，#scrollcontent放在下面，则#scrollcontent的第一行可以滚动到.navlinks栏下方。如果您在#scrollcontent上放置padding-top或margin-top，与.navlinks相同的高度，则第一行将无法进入.navlinks，因为顶部的填充/边距在那里。

还要确保内容接触浏览器视图的边缘，请考虑使用html, body { padding: 0; margin: 0; }。我认为Bootstrap会自动执行此操作。

网格重叠和z索引，我无法选择内容

1 个答案: