css fixed导航盖住了下面的元素, 如何解决?

发布于
2022-05-01


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body,
            h1 {
                margin: 0;
                padding: 0;
            }

            #top-nav {
                height: 50px;
                background-color: red;
                color: #FFF;
                position: fixed;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <nav id="top-nav">
            <h1>导航</h1>
        </nav>
        测试内容测试内容测试内容测试内容测试内容<br>
        测试内容测试内容测试内容测试内容测试内容<br>
        测试内容测试内容测试内容测试内容测试内容<br>
    </body>
</html>

可以看到导航下面的元素被导航覆盖了, 有没有什么办法能解决这个问题?需求是要完整的显示下面的文本

css

阅读 6.8k

5 个回答

得票最新

Precious

44611

发布于
2022-05-01

你导航栏多高，就给下面的元素相应的mragin-top或者padding-top

南城FE

2.2k3975

发布于
2022-05-01

因为#top-nav元素开启了定位，所以层级高于下面的元素，解决方式可以对下面的元素增加#top-nav同等高度的padding-top，另外也可以痛过定位解决

唯一丶

23.3k103743

发布于
2022-05-01

除了给下面的元素添加 margin-top 和 padding-top 值外，还有一些其他的方法。

一、使用 sticky 定位，并添加 top。

#top-nav {
    height: 50px;
    background-color: red;
    color: #FFF;
-    position: fixed;
+    position: sticky;
+    top:0;
    width: 100%;
}

二、使用盒子占位 + JS

如果使用 margin 和 padding 的话，有时候可能没法确定导航条的高度，这时候可以改造一下 DOM 结构。

<div id="top-nav-container">
  <nav id="top-nav">
      <h1>导航</h1>
  </nav>
<div>

把 top-nav 的定位先改成 static，然后使用 JS 来设置一下 top-nav-container 的高度定死，同时设置 top-nav 的定位为 fixed。

// jQuery

$('#top-nav-container').height('+=0')
$('#top-nav').css('position', 'fixed')


// 原生 JS

const topNav = document.querySelector('#top-nav')
document.querySelector('#top-nav-container').style.height = topNav.clientHeight + 'px'
topNav.style.position = 'fixed'