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


154

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

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

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

css  html  overlap 

回答:


88

私はそのようにそれに近づくかもしれません(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="https://via.placeholder.com/200x100" />
</div>
<div id="content">
  
  <div id="links">dssdfsdfsdfsdf</div>
</div>


2
ロゴが使用するスペースを避けてコンテンツを作成する方法はありますか?
ハビエル

1
わかりましたか?私はあなたがコンテンツの上にロゴが欲しいということを意味すると思いますか?もしそうなら、それはdivの通常のフローです(つまり、#logoから左、上、位置を削除します)。私はあなたが何か他のものを意味しているような気がします!:)
オーウェン

2
私はどのようなものだったが、ロゴの周りにコンテンツ(テキスト)ラップを持つことだったと思う
Davy8

2
うーん、私はかなり確信していない。要素であるという問題は、浮き上がらせたり、位置付けたりできますが、両方はできません。彼らがなんらかのフロートを開発するまで:センターのアイデア...
オーウェン

88

2番目のdivで、負のマージンを使用するだけです:

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

また、必要なレイヤーを取得するには、必ずz-indexプロパティを設定してください。


9
これは最も簡単な方法であり、ページのコンテンツでマージンボトムを使用することにより、フッターのオーバーラップに簡単に適応できます。ありがとう!
Peter DeWeese

1
このソリューションはDOCTYPEに依存しているようですね。私が試したときにHTML5 DOCTYPEでは動作しなかったためです。
alumi 2013

2
これは受け入れられる答えである必要があり、絶対位置は問題を引き起こす傾向があります。
Dmitriy

5

絶対配置または相対配置では、あらゆる種類のオーバーラップを行うことができます。ロゴを次のようにスタイル設定したいと思うでしょう。

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

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


1
これにより、リンクがあるテキストとロゴが重なりますか?それとも、リンクを横に押しますか?

1
いいえ、絶対的にフローからタグを効果的に削除します。それはそこになかったかのようです。
2008年

2

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

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

1

ロゴにスペースを確保したい場合は、おそらくロゴを左に浮かせてから、次のようなマージンを使用してコンテンツを下に移動することをお勧めします。

#logo {
    float:左;
    マージン:0 10px 10px 20px;
}

#content {
    マージン:10px 0 0 10px;
}

またはあなたが望むどんなマージンでも。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.