html - 侧面固定菜单重叠在 div 下方-6ren

html - 侧面固定菜单重叠在 div 下方

转载作者：行者123 更新时间：2023-11-28 17:00:17

这是下面的代码。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    width: 130px;
    position: fixed;
    z-index: 1;
    top: 20px;
    left: 10px;
    background: #eee;
    overflow-x: hidden;
    padding: 8px 0;
}

.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #2196F3;
    display: block;
}

.sidenav a:hover {
    color: #064579;
}

.main {
    margin-left: 140px; /* Same width as the sidebar + left position in px */
    font-size: 28px; /* Increased text to enable scrolling */
    padding: 0px 10px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <h2>Auto Sidebar</h2>
  <p>This sidebar is as tall as its content (the links), and is always shown.</p>
  <p>Scroll down the page to see the result.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>    
<div>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>

Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>

Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
</div>
</body>
</html>

Click Here for the practical scenario我想保留 sidenav 直到主 div 完成。它与以下 div 元素重叠。

要了解问题，请滚动到末尾，您会看到左侧导航与下面的其他 div 重叠。

最佳答案

您可以使用 position: sticky 实现该效果。这是一个演示:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    width: 130px;
    position: sticky;
    z-index: 1;
    top: 0px;
    left: 0px;
    background: #eee;
    overflow-x: hidden;
    padding: 8px 0;
    flex-shrink: 0;
}

.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #2196F3;
    display: block;
}

.sidenav a:hover {
    color: #064579;
}

.main {
    font-size: 28px; /* Increased text to enable scrolling */
    padding: 0px 10px;
    display: flex;
    align-items: flex-start;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div class="main">
<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
</div>
  
  <div class="mainContent">
  <h2>Auto Sidebar</h2>
  <p>This sidebar is as tall as its content (the links), and is always shown.</p>
  <p>Scroll down the page to see the result.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>    
</div>
<div>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>

Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>

Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
Full Width!<br/>
</div>
</body>
</html>

关于html - 侧面固定菜单重叠在 div 下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53498839/

文章推荐： javascript - 禁用单击表格 td 但激活单击表格的 div

文章推荐： php - 在循环中绘制空的虚拟列

文章推荐： javascript - React/Redux 处理双向数据

python - 填充matplotlib线图的上方/下方
我正在使用matplotlib创建简单的线图。我的图是一个简单的时间序列数据集，其中我沿x轴有时间，而我在y轴上有测量的值。 y值可以具有正值或负值，如果y值> 0，则我想用蓝色填充行上方和下方的颜色
javascript - 是否可以通过滚动到元素来滚动元素上方/下方
我有一个简单的菜单，当单击菜单项时，该菜单会滚动到某个部分。例如: Contact 将滚动到: 但是我也有一个始终粘在顶部的菜单，并且该菜单的高度不是用滚动脚本计算的。因此菜单总是悬停在元素的顶部
iphone - 强制范围栏位于 UISearchBar 下方
我有一个 UISearchBar 和 UISearchDisplayController，一切都很好，但我的范围选择器显示在文本字段旁边而不是下方。我知道这是设备横向时的预期操作，但由于我在 UISp
java - 尝试将按钮放置在 ListView 下方
因此，我正在创建一个根据用户输入增大和缩小的 ListView ，我需要四个按钮，但我不知道如何让按钮与 ListView 的底部对齐并位于2x2 网格时尚。我已经尝试过相对布局，但似乎不起作用。谢谢
jquery - 如何将脚本引用移动到下方
我正在使用的系统无法直接编辑每个页面上的 HTML。我想添加特定页面正文的顶部，但我输入 HTML 的框会自动将脚本放置在上面我尝试过这个: $('body').prepend(''); 任何帮
Xcode 导航栏位于 ScrollView 下方？
设计模式一切都很好，但在实时导航栏位于 ScrollView 下方我该如何解决这个问题？请帮忙最佳答案同样，在没有看到任何代码的情况下很难说，但我相信导航栏根本没有显示。如果您直接从另一个 Vie
java - 为什么我的栏上的菜单显示在容器中的 JPanel 下方？
我现在必须重用和修改其他人的代码来创建图像处理应用程序。以下代码用于设置框架及其 GUI。我遇到的问题是，当在菜单栏上单击文件字时，菜单项列在 originalImage 容器中包含的 Canvas
html - 以固定宽度间隔将文本对齐到 div 下方
我创建了一个 Angular 指令，用户可以在其中根据一天中的时间更改某些设置。下面是我已有的图片: 我想在 div 的 x 轴上添加一种准确表示时间的“滴答”，以向用户显示他在做什么，如下图所示:
html - 侧面固定菜单重叠在 div 下方
这是下面的代码。 body { font-family: "Lato", sans-serif; } .sidenav { width: 130px; positio
javascript - 如何将谷歌地图定位在前一个 div 下方？
这个问题在这里已经有了答案: Z-Index not working? [closed] (1 个回答) 关闭 5 年前。
html - 导航栏的子菜单出现在另一个 Div 下方
我搜索了这个并尝试了 Z 轴的东西，但无济于事。基本上，我的导航栏在其下方的 div 下方显示有子菜单。那个 div 发生了不透明的事情，这一定与它有关。我需要这些显示在 div 上方!! JS fi
jquery - 将页面内容推送到左浮动的 div 下方
我正在处理的网站的某些页面使用脚本自动创建基于页面标题的目录。但是，我在获取“toc”div 以将页面的其余内容推送到其下方时遇到了一些问题。 TOC div 在我页面的最里面的 div 中，“con
html - float 元素彼此相邻/下方
我的代码 http://jsfiddle.net/p796z/1/ HTML Content Content Content Content Content Content
css - 下拉它显示在 ScrollBar 下方
请看下面的代码: Button dropdown
css - 如何使用CSS将html表单放置在中心并直接放在 Logo 下方
我有一个表格，我希望它直接位于 Logo 下方位于页面中间。到目前为止，我似乎做不到更有什者。任何帮助将不胜感激。谢谢。这是 HTML 代码:
css - 如何将手机键盘放在固定页脚 JqueryMobile 下方
我的 web 应用程序在与 jQuery Mobile 和 cordova 的聊天部分出现问题。我决定用 textaera 和发送消息的按钮修复页脚。但是当我触摸文本区域写消息时，我的键盘没有出现。我
javascript - 可点击的表单图像卡在 Div 下方
我有两个来回箭头，可以单击它们在我的单页网站上的框架中浏览照片。我的术语在这里可能不正确。保存照片和前后箭头的 div 出现在我的屏幕下方，而不是在屏幕场景 div 中。我可以将图像向上移动以出现在屏
html - 如何将导航栏菜单放在 Logo 下方？
我使用自定义 CSS 和 Bootstrap 类名称构建了这个 header 。我已经尝试了 z-index、float: initial 属性。提前致谢 .branding-preview {
html - 附加内容不会位于为移动设备堆叠的包装 DIV 下方
我有两个部分介绍网站上的用例和好处。如下。 .onboardmessaging { min-width: 100%; } .onboardmessagingwrap { min-wi
html - 如何将这些缩略图放置在 slider 下方？
所以，我在网站上发现了这个很酷的 css/html slider ，所以我下载了代码，并打算研究它。我已经开始根据自己的需要对其进行编辑和设计，然后我遇到了这个问题:当我添加比原始尺寸更大的图像时，导

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 侧面固定菜单重叠在 div 下方