คุณจะทำให้ <div> สองตัวทับซ้อนกันได้อย่างไร

ฉันต้องการคนสองคนที่จะดูเป็นแบบนี้:

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

อะไรคือวิธีที่ประณีต / งดงามที่สุดในการทำให้มันซ้อนทับกันอย่างเป็นระเบียบ? โลโก้จะมีความสูงและความกว้างคงที่และจะสัมผัสกับขอบด้านบนของหน้า

ฉันอาจเข้าใกล้เช่น (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>

เพียงใช้ระยะขอบติดลบใน div ที่สองบอกว่า:

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

และตรวจสอบให้แน่ใจว่าได้ตั้งค่าคุณสมบัติดัชนี z เพื่อให้ได้เลเยอร์ที่คุณต้องการ

ด้วยการกำหนดตำแหน่งแบบสัมบูรณ์หรือแบบสัมพัทธ์คุณสามารถทำการซ้อนทับได้ทุกประเภท คุณอาจต้องการให้โลโก้เป็นสไตล์เช่นนี้:

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

หมายเหตุ: ตำแหน่งที่แน่นอนมีความผิดปกติ คุณอาจต้องทดลองนิดหน่อย แต่ก็ไม่ยากเกินกว่าจะทำในสิ่งที่คุณต้องการ

การใช้ CSS คุณสามารถตั้งค่า div โลโก้ให้อยู่ในตำแหน่งที่แน่นอนและตั้งค่า z-order ให้อยู่เหนือ div ที่สอง

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

หากคุณต้องการให้โลโก้ใช้พื้นที่คุณน่าจะดีกว่าที่จะลอยไปทางซ้ายแล้วเลื่อนเนื้อหาลงโดยใช้ระยะขอบเรียงดังนี้:

#logo {
    ลอย: ซ้าย;
    กำไร: 0 10px 10px 20px;
}

#เนื้อหา {
    กำไรขั้นต้น: 10px 0 0 10px;
}

หรือสิ่งที่คุณต้องการขอบ