Html 导航栏上的文本

我有一个垂直导航栏，在我的asp.net MVC5项目中用作菜单。在css样式表中，我定义了它的位置：fixed；能够一直看到它。在我的网页的另一部分，我有一个局部视图，该视图根据菜单选择而变化。我的问题是，当局部视图太大时，当我水平滚动以查看缺少的内容时，文本与导航栏重叠

以下是一个名为_Menu.cshtml的文件中的导航栏示例：

最后，css：

.sidebar-nav{
     position: fixed; //Center works but then my navbar is not fixed anymore!
}

我使用bootstrap来分隔页面的两个部分，因此菜单位于左侧，菜单链接的主体视图或部分视图位于右侧。我知道改变导航栏的位置可以解决这个问题。但我希望有一个固定的导航栏，它不会水平固定，也不会让页面右侧的文本位于导航栏后面。有什么办法吗

---

以下是IpAdress没有显示的样子，因此页面没有填充，请欣赏我的绘画技巧：p

您可能想尝试使用z索引，或使用填充div，它将在内容和菜单之间的顶部起到分隔符的作用。下面的例子

.侧边栏导航{ 位置：固定；//中心工作，但我的导航栏不再固定！ 宽度：100%； z指数：1； } 填充物{ 显示：块； 高度：50px； } 切换导航 边栏菜单 集束文本

Lorem ipsum dolor sit amet，是一位杰出的献身者。无效的侵权人，无效的无效。奥古斯·阿库（augue arcu）的佩伦特斯（Pellentesque）元素，是精英前庭的发酵剂。Curabitur ornare Pat turpis，vitae pellentesque ex Comodo lacinia。这是一次威尼斯人酒后驾车，这是一次封建酒后驾车。莫里斯·佩伦茨克·比本杜姆的自由之路。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。前庭蜗壳有效弧度，无需延长寿命。 在hac habitasse Plateum，一句名言。但奥纳雷、nisl非药用植物、阿尔库智人叶舌、佩伦特斯克维生素和乌尔纳维生素。我坐在这里，我坐在那里。Nam sed aliquet ex，vel consequat magna。这是一个很好的例子。这是一个非常重要的时刻，也是一个非常重要的时刻。但是，turpis在lobortis accumsan中的效率。达皮布斯的弗斯塞姆佩尔·维内纳蒂斯·奥奇。这是一个多尔和直径的莫利斯矢状体。不，不，不，不，不。Mauris accumsan位于diam id。整型妊娠，连续性妊娠，持续性妊娠，最大性妊娠。在这中间，没有选择。Donec congue malesuada tellus，大型拍卖商。 亨德雷特先生、布朗迪特先生、其他精英先生、维塔·马萨·托托先生。毛里斯·鲁特鲁姆·亨德雷特·尼斯维尔·菲尼布斯。这是一个很好的例子。纳勒姆是个拍卖人。做一个尼布·弗里利亚，奥纳·尼布·ac，波苏尔·费利斯。透明调味品，用于前庭。这是一种智慧，它不属于我们。索利西图丁、特里斯蒂克·努克·埃吉特、奥古斯都苏打莱斯的菲塞勒斯。射手座的人只是一个世仇。 弗林尼利亚威尼斯酒店。在威尼斯人的饮食中，不均衡的饮食，不均衡的饮食，不均衡的饮食，不均衡的饮食，不均衡的饮食，不均衡的饮食，不均衡的饮食，不均衡的饮食。自由女神像，欧洲女神像，直径。这是一种健康的生活方式。Mauris rhoncus nisl nec leo sollicitudin，欧盟发酵乳尼西汽水。大酒鬼，尊贵的顾问，酒后驾车。这是奥古斯特·奥纳雷·菲尼伯斯的生命。伊涅阿斯：伊涅阿斯。产于蒙特斯的天然对虾和马格纳斯虎鲸（Orci varius natoque penatibus et magnis），以及印度虎鲸（nascetur ridiculus mus）。这是一个值得尊敬的人。不需要权杖，因为它是暂时的。这是一种慈姑的调味品。在purus-ut-nisl-porttitor-porttitor-nec-eget-metus中的Nullam。塞德·马克西姆斯·尼尔·阿库。同侧静脉曲张，尼氏静脉曲张。 这是一个空白，这是一个错误，也是一个错误。码头前庭、非平底码头、拉奥里特浮士德酒店。阿利奎姆拍卖商rhoncus ultrices。Nullam a sem sagittis，accumsan risus eu，auctor nisl。矢状叶前庭。这是一个很好的例子。毛里斯元素，非最大值。 在bibendum neque ultrices ac.Sed sodales Temporal augue et molestie，turpis massa的主旨是暂停

---

你有没有试过用z-index将菜单分层到你的内容上？你能做一把小提琴吗？@KanstantsinArlouski没有我会查出来的谢谢，如果它不起作用，我就放JSFIDLE:@KanstantsinArlouski就是这样，谢谢：是的，填充并不能解决问题，它增加了一个空间，但我的问题是站在一个垂直的立场上，所以我不能让它工作。我猜我给你的代码片段有误导性，因为通常情况下，菜单在左边，而菜单右边的文本只有在文本太长时才会重叠，你必须向右滚动，我猜这是另一个问题哈！。再次感谢：我很乐意帮你，你能帮我制作提琴/密码笔吗？这样做，给我你的最终结果，它就会完成。哇，那真是太好了：我来了！所以当我把它放在JSFIDLE上时，就没有这个问题了哈！也许它来自helper@RenderBody？在这个演示中，文本在调整大小时会被压缩，但我的实际页面没有这样做，我正在查看有什么不同我添加了一张图片，以便在我的网站上显示它的功能。啊!！我明白了原因，这是因为字符串长度，请看这里：你能在浏览器中右键单击，并向我提供你的应用程序的html源代码吗？你可以把所有这些放在一个文本编辑器中，用一些废话来替换所有的敏感信息。等等，那是浏览器吗？

<div class="container-fluid">
     <div class="row affix-row">
         <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4 affix-sidebar">
               @Html.Partial("~/Views/PartialViews/_Menu.cshtml")
         </div>
         <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
               @RenderBody()
         </div>
    </div>
</div>

.sidebar-nav{
     position: fixed; //Center works but then my navbar is not fixed anymore!
}