html - How to overlap sidebar on top of nav-bar

Question

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>

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 !