html - 固定标题与内容重叠,无法使用填充或边距修复它
问题描述
我正在尝试使用 position:fixed 构建一个简单的导航标题,并且下面的内容(div)在它下面,有人知道如何解决这个问题吗?
我知道 position:fixed 将标题从 DOM 流中取出,所以我尝试将 padding-top 应用于 body 并将 margin top 应用于任何后续 div 但它与标题一起移动仍然导致重叠
HTML `
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="navbar.css">
</head>
<body>
<div class="nav-container clearfix">
<ul>
<li><a class="active" href=#>HTML</a></li>
<li><a href=#>CSS</a></li>
<li><a href=#>JAVASCRIPT</a></li>
<li><a href=#>PHP</a></li>
</ul>
</div>
<div class="second">
JAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPT
</div>
</body>
`
CSS
*{
box-sizing: border-box;
font-family: "Segoe UI",Arial,sans-serif;
}
body{
height:3000px;
margin:0;
padding:0;
padding-top:51.1px;
}
.nav-container{
width:100%;
padding:0;
background-color:#5f5f5f;
position:fixed;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
z-index:1;
}
.clearfix {
content: "";
display: table;
clear: both;
}
ul {
list-style-type: none;
text-align: center;
margin: 0;
}
li {
float:left;
}
li a{
display:block;
color:#f1f1f1;
padding: 14px 16px;
text-decoration: none;
text-align:center;
font-size: 17px;
}
.active{
background-color: mediumseagreen;
}
li a:hover:not(.active) {
background-color: black;
}
.second{
background-color: aqua;
display:block;
width:100%;
height:2000px;
z-index:10000; /*doesnt work bec. element not positioned*/
}
应用填充或边距时,仅期望标题后面的内容移动。
解决方案
如果您只想将菜单保留在页面顶部,则删除 position:fixed; https://jsfiddle.net/mkLan96o/
.nav-container{
width:100%;
padding:0;
background-color:#5f5f5f;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
z-index:1;
如果您想要滚动菜单,请使用引导程序。
推荐阅读
- javascript - React Native 应用程序尚未注册 {[React native]}
- php - 在 symfony 中添加带有表单事件的字段
- mysql - 在哪里与有 SQL
- django - Django中的嵌套序列化器
- angular - Angular 5/6 Http 获取调用
- sql - 运行时错误 5631 的原因是什么?如何解决这个问题?
- javascript - 使用购物车页面 Magento 2 中的递增和递减按钮自动更新购物车
- swift - 在领域中查询 Int 时的值无效
- magento - Magento 2 如何覆盖核心 system.xml 文件
- php - 古腾堡在某些页面上保存时返回错误 500