어떻게 두 가지를 만들 것

어떻게 두 가지를 만들 것

겹치는가?

---

다음과 같이 보이려면 두 개의 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-index 속성을 설정하십시오.

---

절대 또는 상대 위치 지정을 사용하면 모든 종류의 겹치기를 수행 할 수 있습니다. 로고를 다음과 같이 스타일링하고 싶을 것입니다.

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

참고 : 절대 위치에는 편심이 있습니다. 아마도 조금 실험해야 할 수도 있지만 원하는 것을하기가 너무 어렵지 않아야합니다.

---

CSS를 사용하여 로고 div를 절대 위치로 설정하고 z 순서를 두 번째 div 위에 설정합니다.

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

---

If you want the logo to take space, you are probably better of floating it left and then moving down the content using margin, sort of like this:

#logo {
    float: left;
    margin: 0 10px 10px 20px;
}

#content {
    margin: 10px 0 0 10px;
}

or whatever margin you want.

참고URL : https://stackoverflow.com/questions/270493/how-would-you-make-two-divs-overlap