Question

我正在开发一个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大约两周了。

附上图片以供参考。

Answer 1

导航栏宽度为100％但位于侧边栏后面。尝试为导航提供更大的z-index以将其带到前面。

CSS

#navigation-bar {
  width: 100%;
  height: 20%;
  position: relative;
  z-index: 2;
}

这是codepen

Answer 2

如果您希望顶部栏和侧边栏跟随用户（也称为固定在窗口中），请将position: fixed和top，left，{{1}设置为width }和height值。

例如：

＆＃13;

html, body { margin: 0; padding: 0; }

#top {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50px; /* Using px here is better I think */
  background-color: blue;
  z-index: 2;
}
#side {
  position: fixed;
  top: 50px;  /* Using px here is better I think */
  bottom: 0px;
  left: 0px;
  width: 100px;
  background-color: green;
  z-index: 2;
}
#content {
  position: relative;
  width: 100%;
  padding-top: 50px; /* Use the topbar's height + something more? */
  padding-left: 100px; /* Use the sidebar's width + something more? */
  background-color: grey;
  /* Set box-sizing to border-box, to ensure the content block stays within the window, and not expand due to padding */
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

＆＃13;

<div id="top">
Top bar
</div>
<div id="side">
Side bar
</div>
<div id="content">
Content
</div>

＆＃13;

调整CSS中的侧栏和导航栏位置

2 个答案: