如何在导航栏顶部重叠侧边栏 [英] How to overlap sidebar on top of nav-bar

问题描述

对不起，我不能发布没有更高声誉的图片，所以我在下面链接了它们:

PSD:

HTML:

好的，PSD 屏幕截图是我想要对齐的内容.

HTML 屏幕截图是当前表单.

如您所知，侧边栏目前位于橙色栏(导航)和灰色栏(横幅)下方.我知道有一种方法可以使其位置绝对化并将其覆盖在顶部，但是看到这是建立在响应式网格上的，我认为这会毁了它.

有没有人知道在不破坏响应性的情况下像 psd 中显示的那样重叠侧边栏?

我愿意接受任何和所有建议.

谢谢！

代码:

<div class="row"><标题>内容

<导航>内容<div class="容器"><div class="row"><div class="col-sm-9"><部分><!-- 服务部分内容--></节><服务><!-- 客户部分内容--></节><部分>

<div class="col-sm-3"><!-- 侧边栏-->

解决方案

如果您编辑媒体查询进行补偿，使用 position:absolute 不会破坏您的响应式布局.

或者，尝试在侧边栏元素上设置负边距，并将 z-index 设置为高于顶部栏元素.示例:

header {宽度:100%；高度:100px；背景:#ccc;z-索引:100；}.col-sm-9 {宽度:200px；高度:500px；边距:-50px 0 0 0;背景:#000；z-索引:200；}

有一个小提琴:http://jsfiddle.net/68ANR/

Sorry, I couldn't post images without a higher reputation, so I linked them below:

PSD:

HTML:

Okay, the PSD screenshot is of what I want the alignment to do.

And the HTML screenshot is it's current form.

As you can tell, the sidebar is currently below the orange bar (nav) and the grey bar (banner). I know there is a way to make its position absolute and overlay it on top, but seeing that this is built on a responsive grid, I think that would ruin it.

Does anyone know of anyway to overlap the sidebar like it is shown in the psd without ruining the responsiveness?

I'm open to any and all suggestions.

Thanks!

Code:

<div class="container">
 <div class="row">
  <header> content </header>
 </div>
</div>
<nav> content </nav>
<div class="container">
 <div class="row">
  <div class="col-sm-9">
   <section>
    <!-- Services Section Content -->
   </section>
   <services>
    <!-- Clients Section Content -->
   </section>
   <section>
  </div>
  <div class="col-sm-3">
   <!-- Sidebar -->
  </div>

解决方案

Using position:absolute would not ruin your responsive layout if you edit your media queries to compensate.

Alternately, try a negative margin on the sidebar element and set the z-index to be higher than the top bar element. Example:

header {
    width:100%;
    height:100px;
    background:#ccc;
    z-index:100;
}

.col-sm-9 {
    width:200px;
    height:500px;
    margin:-50px 0 0 0;
    background:#000;
    z-index:200;
}

Have a fiddle: http://jsfiddle.net/68ANR/

这篇关于如何在导航栏顶部重叠侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！