두 개의 <div>를 어떻게 겹치게 하시겠습니까?

154

다음과 같이 보이려면 두 개의 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

로고가 사용하는 공간을 피하기 위해 콘텐츠를 만드는 방법이 있습니까?

— Javier

1

흠 당신은 명확히 할 수 있습니까? 내용 위의 로고를 원한다는 의미로 사용합니까? 그렇다면 그것은 정상적인 div 흐름입니다 (왼쪽, 위쪽, #logo에서 위치를 제거하십시오). 나는 당신이 다른 것을 의미한다고 생각합니다! :)

— Owen

2

내용은 텍스트를 텍스트로 감싸는 것이 었습니다.

— Davy8

2

아 흠, 확실하지 않습니다. 요소라는 문제는 플로팅되거나 배치 될 수 있지만 둘다는 아닙니다. 그들이 어떤 종류의 플로트를 개발할 때까지 : 중심 아이디어 ...

— Owen

88

두 번째 div에서 음수 마진을 사용하십시오.

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

원하는 레이어링을 얻기 위해 z-index 속성을 설정하십시오.

— 트래비스 O
소스

9

이 방법은 지금까지 가장 간단한 방법이며 페이지 내용에 여백 하단을 사용하여 바닥 글이 겹치도록 쉽게 조정할 수 있습니다. 감사!

— Peter DeWeese

1

이 솔루션은 DOCTYPE에 의존하는 것 같습니다. 내가 시도했을 때 HTML5 DOCTYPE에서 작동하지 않았기 때문입니다.

— alumi

2

이것은 정답이어야하며 위치 절대 값은 문제를 일으키는 경향이 있습니다.

— Dmitriy

5

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

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

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

— 뿌 blu 게
소스

1

링크가있는 곳에서 로고가 텍스트와 겹치게됩니까? 아니면 링크를 옆으로 밀었습니까?

1

아니요, 절대적으로 흐름에서 태그를 효과적으로 제거합니다. 마치없는 것처럼 보일 것입니다.

— sblundy

2

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

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

— 플라이 스왓
소스

1

로고에 공간을 확보하려면 왼쪽에 떠 다니고 여백을 사용하여 내용을 아래로 이동하는 것이 좋습니다.

#logo {
    왼쪽으로 뜨다;
    여백 : 0 10px 10px 20px;
}

#content {
    여백 : 10px 0 10px;
}

또는 원하는 여백.

— 지시
소스