두 개의 중첩을 어떻게 만들겠습니까?

Question

다음과 같이 보이려면 두 개의 div가 필요합니다.

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

가장 깔끔한/가장 우아한 방법은 깔끔하게 겹치게합니까? 로고의 높이와 너비는 고정되어 있으며 페이지의 상단 가장자리에 닿습니다.

Answer 1

나는 그렇게 접근 할 수 있습니다 (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>

Answer 2

두 번째 div에서 부정적인 마진을 사용하십시오.

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

원하는 레이어링을 얻으려면 Z-Index 속성을 설정하십시오.

Answer 3

절대적 또는 상대적 위치를 사용하면 모든 종류의 겹치는 것을 수행 할 수 있습니다. 당신은 아마도 로고를 스타일로 만들기를 원할 것입니다.

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

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

Answer 4

CSS를 사용하여 로고 div를 절대 위치로 설정하고 Z-Order를 두 번째 div 위로 설정했습니다.

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

Answer 5

로고가 공간을 차지하기를 원한다면 아마도 남은 것을 떠난 다음 다음과 같은 여백을 사용하여 내용을 아래로 이동하는 것이 좋습니다.

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

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

또는 원하는 마진.