css - どうやって2つ作るの？重なりますか？

Question

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

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

それらをきれいに重ねる最もきちんとした/最もエレガントな方法は何ですか? ロゴの高さと幅は固定され、ページの上端に接します。

Answer 1

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

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

また、z-index プロパティを設定して、必要なレイヤリングを取得してください。

Answer 2

私は次のようにアプローチするかもしれません (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>

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

#ロゴ {
    フロート: 左;
    マージン: 0 10px 10px 20px;
}

＃コンテンツ {
    マージン: 10px 0 0 10px;
}

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