CSS에 요소를 쌓는 방법

웹에서 환상적이고 독특한 시각적 경험을 만들려면 결국 같은 장소에서 겹치거나 존재하기 위해 두 가지 요소가 필요합니다. 서로 근처 또는 옆에 위치해야 할 수도 있습니다. 이것을 달성하기 위해 두 가지 다른 방법을 살펴 보겠습니다. 하나는 위치 특성과 하나는 CSS 그리드가 있습니다.

방법 1 : 위치 속성 사용

당신은 이미 그 위치를 알고있을 것입니다 : 절대; 원하는 곳에 페이지에 무언가를 배치 할 것입니다. 이 경우, 우리는 아이를 페이지의 왼쪽 상단에 절대적으로 배치하고 있습니다. 부모가 어디에 있든 아이는 그 모퉁이에 배치됩니다.

 .어린이 {
  ...
  위치 : 절대;
  상단 : 0;
  왼쪽 : 0;
} 

펜을 참조하십시오
CSS 스택, Sarah Drasner의 절대 1 (@sdras)
Codepen에서.

그러나 이것은 매우 취성입니다! 당신이 페이지에 무언가를 놓고 그 뒤에 다른 무언가가 나오면 어떻게 될까요? 어쩌면 왼쪽 상단 코너에서 항상 원하는 탐색 내에 아이콘이있을 수 있지만 제 3자가 들어 와서 배너 광고에 넣습니다. (저는 배너 광고를 옹호하지는 않지만 존재합니다.) 이것은 탐색을 아래로 밀어 내고 이제 아이콘이 제자리에 없습니다.

또는 여러 장소에서 사용할 수있는 자체 포함 구성 요소를 만들고 싶다고 가정 해 봅시다. 당신은 그것을 어디에서 사용하든 재사용 가능하고 자신의 상황에서 일해야합니다.

우리가 위치를두면 : 상대; 부모 요소에서 위치가있는 내부의 모든 것 : 절대; 포함 된 단위에 비해 절대적으로 배치됩니다!

 .어린이 {
  / * ... */
  위치 : 절대;
  상단 : 0;
  왼쪽 : 0;
}

.parent {
  위치 : 상대;
} 

펜을 참조하십시오
CSS 스태킹, Sarah Drasner의 절대 2 (@Sdras)
Codepen에서.

멋진.

우리는 서로 위에 두 개의 요소를 쌓고 싶다면이 동일한 전제를 사용할 수 있습니다. 여기, 우리는 두 개의 아동 요소가 서로 쌓여 150 픽셀로 구분됩니다. 우리는 그들이 지금 동일한 부모에 포함되어 있고 그 안에 위치한 상태를 유지한다는 것을 알 수 있습니다.

조상

어린이 1

어린이 2

 .어린이 {
  위치 : 절대;
  상단 : 0;
}

.child-1 {
  왼쪽 : 0;
}

.child-2 {
  왼쪽 : 150px;
}

.parent {
  위치 : 상대;
} 

펜을 참조하십시오
CSS 스택, Sarah Drasner의 절대 3 (@Sdras)
Codepen에서.

이것은 약간 오래된 학교이지만, 나는 몇 년 동안 그것을 사용해 왔으며 여전히 그것을 위해 도달합니다. 브라우저에서 일관되게 작동하며 가장 이상하고 독특한 배치조차도 달성 할 수 있습니다.

방법 2 : CSS 그리드 사용

요소를 겹치거나 쌓거나 배치를 수정하는 또 다른 좋은 방법은 지원 해야하는 양 (Caniuse로 확인할 수 있음)에 따라 CSS 그리드입니다.

우리는 다음과 같은 용기에 필요한 곳에 무언가를 배치 할 수 있습니다.

 .parent {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 250px 1fr;
  그리드-템플릿 열 : 150px 1fr;
}

.어린이 {
  그리드 영역 : 1 / 1 / 2 / 2;
} 

펜을 참조하십시오
CSS 스태킹, Sarah Drasner의 그리드 1 (@sdras)
Codepen에서.

그리고 한 요소가 다른 요소에 쌓아야한다면 정확히 동일한 그리드 영역에 넣을 수 있습니다. 마진을 사용하여 약간 상쇄합시다.

 .parent {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 250px 1fr;
  그리드-템플릿 열 : 150px 1fr;
}

.어린이 {
  그리드 영역 : 1 / 1 / 2 / 2;
}

.child-2 {
  마진 왼쪽 : 200px;
} 

펜을 참조하십시오
CSS 스태킹, Sarah Drasner의 그리드 2 (@Sdras)
Codepen에서.

이 기술을 시각화하기가 어렵다는 것을 알게되면 CSS 그리드 생성기를 만들었습니다.

이 기술을 사용할 곳이 너무 많습니다! 스택, 레이어 및 오프셋 요소를 쌓을 수 있습니다. 탐색, 바닥 글을 만들 수 있습니다. 요소가 페이지에 배치되는 방식을보다 세밀하게 제어하려는 거의 모든 유형의 레이아웃 만 만들 수 있습니다.

위 내용은 CSS에 요소를 쌓는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!