📌 CSS 오버플로우 처리 완벽 가이드

웹 페이지에서 요소가 겹치거나 넘쳐서 보이지 않을 때 overflow 속성을 사용하여 문제를 해결할 수 있습니다. 이 포스트에서는 CSS의 overflow 속성과 z-index 속성을 활용하여 웹 요소를 정렬하고 배치하는 방법에 대해 알아봅니다.

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible"
        contect="IE=edge"
        >
        
        <title>겹치는요소</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                position: relative;
            }
            .div1{
                background-color: orange; 
                z-index: 4;
                overflow: auto;
            }
            .div2{background-color: red; bottom: 50px; z-index: 3;}
            .div3{background-color: purple; bottom: 100px; z-index: 2;}
            .div4{background-color: green; bottom: 150px; z-index: 1;}

        </style>

    </head>
    <body>
        <div class="div1">
        orangeorangeorangeorangeorange
        orangeorangeorangeorangeorange
        orangeorangeorangeorangeorange
        orangeorangeorangeorangeorange
        orangeorangeorangeorangeorange
        orangeorangeorangeorangeorange
        </div>
        <div class="div2">2</div>
        <div class="div3">3</div>
        <div class="div4">4</div>

📋 1. z-index 속성 이해하기

**z-index**는 요소가 z축에서 어떤 순서로 쌓일지 결정하는 속성입니다. 이를 통해 여러 요소들이 겹쳐 있는 경우, 어떤 요소가 위에 표시될지 제어할 수 있습니다.

🔹 z-index 기본 사용법

  • **z-index**는 정수 값으로 쌓임 순서를 지정합니다.
  • 기본적으로 z-index 값이 높은 요소가 위로 쌓입니다.

✅ 예시

#element1 {
  position: absolute;
  z-index: 1;
}

#element2 {
  position: absolute;
  z-index: 2;
}
  • **element2**가 **element1**보다 위로 표시됩니다.

📋 2. overflow 속성 이해하기

overflow 속성은 요소의 콘텐츠가 영역을 벗어났을 때 어떻게 처리할지를 설정합니다. 주로 스크롤, 숨김, 반복 등을 조정할 때 사용됩니다.

🔹 overflow 속성 값

속성 값설명
visible 기본값으로, 영역을 벗어난 콘텐츠를 그대로 보여줍니다.
hidden 영역을 벗어난 콘텐츠는 잘라내어 보이지 않게 처리합니다.
scroll 영역을 벗어난 콘텐츠를 잘라내고, 스크롤을 만들어 볼 수 있게 합니다.
auto 웹 브라우저 설정에 따라 처리됩니다. (주로 scroll 처리)

✅ 예시

.container {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
  • **overflow: hidden**을 사용하면, 콘텐츠가 박스 영역을 넘치더라도 보이지 않게 처리됩니다.

📋 3. position 속성 활용하기

position 속성은 요소의 위치를 제어하는 데 사용됩니다. **absolute**나 **fixed**와 함께 사용하여, overflow 속성으로 요소의 흐름을 제어할 수 있습니다.

✅ 예시

.container {
  position: relative;
  overflow: auto;
}
  • **overflow: auto**는 넘치는 콘텐츠에 스크롤을 추가하여 화면 내에서 볼 수 있도록 합니다.

🚩 정리

  • z-index: 겹치는 요소의 쌓임 순서를 제어합니다.
  • overflow: 콘텐츠가 영역을 벗어날 때 어떻게 처리할지를 설정합니다.
  • position: 요소의 위치를 제어하고 **overflow**와 함께 사용하여 레이아웃을 제어합니다.

**z-index**와 **overflow**를 활용하여 자유롭게 배치하고 넘치는 콘텐츠를 제어할 수 있습니다. 이 속성들은 웹 페이지의 효율적인 레이아웃 구성과 정렬을 위해 꼭 필요한 요소입니다. 🎨💻

이제 **CSS overflow**와 z-index 속성을 활용하여 레이아웃을 자유롭게 다룰 수 있게 되셨습니다! ✨

2/2
 

'HTML & CSS' 카테고리의 다른 글

Chapter 3-16. 의사요소와 의사클래스(CSS)  (0) 2025.03.31
Chapter 3-15. 선택자 더 알아보기(CSS)  (0) 2025.03.31
Chapter 3-13. 위치 지정하기 <position>(CSS)  (0) 2025.03.31
Chapter 3-12. 문서의 흐름 <float>(CSS)  (0) 2025.03.31
Chapter 3-11. 요소의 유형 <display>(CSS)  (0) 2025.03.31

티스토리툴바