如何在导航栏顶部重叠侧边栏

Question

抱歉，我无法发布没有更高声誉的图片，所以我将它们链接在下面：

PSD：

HTML：

好的，PSD截图是我想要对齐的。

HTML屏幕截图是它的当前形式。

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

有没有人知道如果在不破坏响应性的情况下在psd中显示的侧边栏重叠？

我愿意接受任何建议。

谢谢！

代码：

<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>

Answer 1

如果您编辑媒体查询以进行补偿，则使用position：absolute不会破坏您的自适应布局。

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

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;
}

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

Answer 2

It will perfectly works.Try it because position:absolute give the position to the main div or the parent div.   
 .col-sm-9 {
        position:absolute;
        left:/*give here from left*/px;
        top:/*give here from top*/px;
        width:200px;
        height:500px;
        background:#000;
        z-index:200;
    }

Hope the answer !