어떻게 두 개를 만들겠습니까?어떻게 두 개를 만들겠습니까?겹치기?

어떻게 두 개를 만들겠습니까?

겹치기?

이런 모습을 보이려면 두 명의 디브가 필요합니다.

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

가장 깔끔하고 우아하게 겹쳐지게 하는 방법은 무엇입니까?로고는 높이와 너비가 고정되어 있으며 페이지 상단 가장자리에 닿을 것입니다.

음의 마진을 사용하면 다음과 같습니다.

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

그리고 원하는 레이어를 얻을 수 있도록 z-index 속성을 설정해야 합니다.

다음과 같이 접근할 수 있습니다(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#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 {float: left;마진: 0 10 px 10 px 20 px;}
#내용 {마진: 10 px 00 10 px;}

원하는 만큼의 여유를 가질 수도 있습니다.

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