我正在做一个 Rails 元素。我正在尝试在顶部创建一个导航栏和一个需要跟随用户的侧边栏。
这是CSS`
#sidebar {
top:0; bottom:0; left:0;
width:11%;
background: #b3d9ff;
position: fixed;
}
#content {
border:1px solid #000;
width:100px;
height:50px;
padding: 10px;
margin:5px 0 5px 0;
position: relative;
}
#navigation-bar {
width: 100%;
height: 20%;
position: relative;
}
ul {
list-style-type: none;
margin: 2px;
padding: 10px;
overflow: hidden;
background-color: #333;
}
li {
padding: 10px;
float: left;
}
#right {
float:right;
padding: 10px;
}
`
这是 HTML，
<body>
<div id = "navigation-bar">
<ul>
<li><%= link_to 'Home', home_index_path, class: "btn btn-success" %></li>
<li id = "right"><button type="button" name="button" class = "btn btn-default">Contact</button></li>
<li id = "right"><button type="button" name="button" class = "btn btn-default">About</button></li>
</ul>
</div>
<div class = "container">
<div id = "sidebar" class = "container-fluid"></div>
<div id = "container" class = "container-fluid"></div>
<%= yield %>
</div>
</div>
</body>
问题是侧边栏与导航栏重叠。我根本不想要任何重叠，甚至不想要相反的方式。我只需要侧边栏从导航栏底部结束的地方开始。
我在容器 div 中添加了导航栏，但导航栏不会占据页面的整个宽度。
我已经在这里工作了两个小时了。
请记住，我对这一切都是全新的。现在只编写了大约两周的 HTML 和 CSS。
附上图片以供引用。
最佳答案
导航栏的宽度为 100%，但它位于侧边栏的后面。尝试为导航提供更大的 z-index 以将其置于最前面。
CSS
#navigation-bar {
width: 100%;
height: 20%;
position: relative;
z-index: 2;
}
这是一个codepen
关于html - 在 CSS 中调整侧边栏和导航栏的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35328108/