How to overlap sidebar on top of nav-bar

问题

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>

回答1:

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/

回答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 !

来源：https://stackoverflow.com/questions/19919599/how-to-overlap-sidebar-on-top-of-nav-bar

标签

html

css

twitter-bootstrap

sidebar

overlap