1

申し訳ありませんが、評判が高くないと画像を投稿できなかったので、以下にリンクしました。

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

2 に答える 2

0 
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 !
于 2013-12-23T18:46:03.893 に答える
0

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/

于 2013-11-12T02:37:07.657 に答える