web-dev-qa-db-ja.com

2つの<div>をどのようにオーバーラップさせますか？

このように見えるには、2つのdivが必要です。

    |               |
 ---|    LOGO       |------------------------
|   |_______________|  LINKS                |
|             CONTENT                       |

それらをきれいにオーバーラップさせるための最も洗練された/最もエレガントな方法は何ですか？ロゴの高さと幅は固定されており、ページの上端に触れます。

csshtmloverlap
126
st elmos fire

私はそのようにアプローチするかもしれません（CSSとHTML）：

html,
body {
  margin: 0px;
}
#logo {
  position: absolute; // Reposition logo from the natural layout
  left: 75px;
  top: 0px;
  width: 300px;
  height: 200px;
  z-index: 2;
}
#content {
  margin-top: 100px; // Provide buffer for logo
}
#links {
  height: 75px;
  margin-left: 400px; // Flush links (with a 25px "padding") right of logo
}
<div id="logo">
  <img src="http://www.skrenta.com/images/stackoverflow.jpg" />
</div>
<div id="content">
  
  <div id="links">dssdfsdfsdfsdf</div>
</div>
78
Owen

負のマージンを使用するだけで、2番目のdivでは次のように言います。

<div style="margin-top: -25px;">

そして、z-indexプロパティを設定して、必要なレイヤーを取得してください。

72
TravisO

絶対配置または相対配置を使用すると、あらゆる種類のオーバーラップを実行できます。あなたはおそらくロゴをそのようにスタイルしたいでしょう：

div#logo {
  position: absolute;
  left: 100px; // or whatever
}

注：絶対位置には偏心があります。おそらく少し実験する必要がありますが、やりたいことをするのはそれほど難しくないはずです。

4
sblundy

ロゴにスペースを取りたい場合は、左に浮かせてから、マージンを使用してコンテンツを下に移動する方が良いでしょう。

＃logo {
 float：left; 
 margin：0 10px 10px 20px; 
} 
 
＃content {
 margin：10px 0 0 10px; 
}

またはあなたが望むマージン。

1
jishi

CSSを使用して、ロゴdivを絶対位置に設定し、zオーダーを2番目のdivの上に設定します。

#logo
{
    position: absolute:
    z-index: 2000;
    left: 100px;
    width: 100px;
    height: 50px;
}
1
FlySwat