css 正文中的内容位于导航栏中

nwlls2ji 于 2023-03-14 发布在其他

关注(0)|答案(1)|浏览(112)

我试图创建一个响应网站与html和css我刚刚完成了导航栏，但我注意到一个问题，我的身体的内容是溢出到导航栏

<body>
    <div class="navbar">
        <h1>test</h1>
        <div style="justify-content: space-evenly;display:flex;">
            <a class="test">
                <u><h2>test</h2></u>
            </a>
            <a class="test">
                <u><h2>test</h2></u>
            </a>
            <a class="test">
                <u><h2>test</h2></u>
            </a>
        </div>
    </div>
    <div class="main">
        Test
    </div>
</body>

body {
    height: 100dvh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
    align-items: center;
}

.navbar {
    position: fixed;
    text-align: center;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

div main位于导航栏内部并隐藏在其下方
我如何防止这种情况？
我试着设置一个边距，但由于某种原因，它仍然留在导航栏内
再深入一点

css

来源：https://stackoverflow.com/questions/75668061/content-in-body-is-in-navbar

1条答案

按热度按时间

xxhby3vn1#

固定位置更改元素在框中占用空间的方式。将导航栏的position属性更改为static，或为.main元素添加上边距

body {
  height: 100dvh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
}

.navbar {
  position: static;  // <-- changed fixed to static
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}

<body>
  <div class="navbar">
    <h1>test</h1>
    <div style="justify-content: space-evenly;display:flex;">
      <a class="test">
        <u><h2>test</h2></u>
      </a>
      <a class="test">
        <u><h2>test</h2></u>
      </a>
      <a class="test">
        <u><h2>test</h2></u>
      </a>
    </div>
  </div>
  <div class="main">
    Test
  </div>
</body>

赞(0）回复(0）举报 2023-03-14

我来回答

css 正文中的内容位于导航栏中

1条答案

相关问题

热门标签

最新问答