본문 바로가기
IT(Tip)

웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #6(위치 속성 - position, z-index, overflow)

by good4me 2020. 9. 28.

goodthings4me.tistory.com

 

■ 위치 속성 (position, z-index, overflow)

O 요소(Element) 위치 설정 2가지 방법

- 절대적 위치 좌표 : 요소의 X좌표와 Y좌표를 설정해 절대적 위치를 지정
* 특정한 크기의 영역을 지정한 태그 내부에서만 사용

- 상대적 위치 좌표 : 요소의 입력한 순서대로 상대적으로 위치를 지정

 

O position 속성

- 웹 문서 안에 요소들을 배치하기 위한 속성(태그의 위치 설정 변경 속성)

- 형식
position: static | relative | absolute | fixed
[상대적 위치 좌표 사용할 때는 static 또는 relative]
[절대적 위치 좌표 사용할 때는 absolute 또는 fixed]

  • static : 요소를 문서의 흐름(정상적인 흐름)에 맞추어 배치(태그가 위에서 아래로, 왼쪽에서 오른쪽 순서대로 배치), left 속성이나 top 속성이 이전 요소와 연결없이 배치됨 
  • relative : 초기 위치 상태(또는 static으로 초기 위치 지정 상태)에서 이전 요소에 자연스럽게 연결해 배치(top, bottom, left, right 속성 이용) 가능
  • absolute : 원하는 위치를 지정 배치(절대적 위치의 좌표값을 자유롭게 사용 가능하나, 가장 가까운 부모 요소나 조상 요소 중 position: relative인 요소가 있어야 함. left, top, right, bottom 속성 사용해 네 모서리에서 얼마나 떨어져 있는지 지정 가능
  • fixed : 화면을 기준으로 절대적 위치 좌표 설정(지정한 위치에 고정되나 화면에서 요소가 잘릴 수도 있음), 문서의 흐름과 상관없이 원하는 위치에 요소 배치, 부모 요소가 아닌 브라우저 창 기준(좌상단 꼭지점)으로 좌표 계산, 브라우저 창 화면을 스크롤하더라도 계속 같은 위치에 고정됨

- static을 제외한 나머지 속성은 좌표로 요소의 위치를 조절(top, bottom, left, right)할 수 있음(좌표값은 양수와 음수 모두 사용 가능)

  • top : 위쪽으로부터 떨어진 거리
  • bottom : 아래쪽으로부터 떨어진 거리
  • left : 왼쪽에서  떨어진 거리
  • right : 오른쪽에서  떨어진 거리
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .box:nth-child(1) {
            background-color: red;
        }
        .box:nth-child(2) {
            background-color: green;
            left: 20px;
            top: 20px;            
        }
        .box:nth-child(3) {
            background-color: blue;
            left: 30px;
            top: 30px;     
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>

good4me.co.kr

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            position: relative;
        }
        .box:nth-child(1) {
            background-color: red;
        }
        .box:nth-child(2) {
            background-color: green;
            left: 20px;
            top: 20px;            
        }
        .box:nth-child(3) {
            background-color: blue;
            left: 30px;
            top: 30px;     
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>

 

O z-index 속성

- 요소와 요소가 겹칠 때 겹치는 순서(요소 쌓는 순서) 정하기

- z-index 값이 크면 값이 작은 요소보다 위에 쌓인다

- z-index 값을 명시하지 않으면 1부터 시작해서 1씩 커진다

<!-- z-index 없을 경우 -->

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .box:nth-child(1) {
            background-color: red;
            left: 10px;
            top: 10px;
        }
        .box:nth-child(2) {
            background-color: green;
            left: 50px;
            top: 50px;
        }
        .box:nth-child(3) {
            background-color: blue;
            left: 90px;
            top: 90px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>

 

<!- z-index 적용 -->

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            position: absolute; /* fixed 도 동일 */
        }
        .box:nth-child(1) {
            background-color: red;
            left: 10px;
            top: 10px;
            z-index: 100;
        }
        .box:nth-child(2) {
            background-color: green;
            left: 50px;
            top: 50px;
            z-index: 10;
        }
        .box:nth-child(3) {
            background-color: blue;
            left: 90px;
            top: 90px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>

 

O 위치 속성과 관련된 공식 

- <div> 태그 영역을 차지하지 않는다.
즉, position 속성에 absolute 키워드 적용(.box) 시 부모 태그(div)가 영역을 차지하지 않는다.
* 해결 : 자손에게 position : absolute 적용하면, 부모에게 height 속성 입력

- 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 않는다.
* 해결 : 자손에게 position : absolute 적용하면, 부모의 position : relative 적용

- 요약하면, 부모에게 height, position: relative 속성을 주어서 해결

<!-- 위 해결사항 적용 안한 경우 -->

<head>
    <style>
        body>div {
            width: 400;
            height: 200px;
            border: 2px solid black;
            position: absolute;
        }
        .box {
            width: 100px;
            height: 100px;
            position: relative;
        }
        .box:nth-child(1) {
            background-color: red;
            left: 10px;
            top: 10px;
            z-index: 100;
        }
        .box:nth-child(2) {
            background-color: green;
            left: 50px;
            top: 50px;
            z-index: 10;
        }
        .box:nth-child(3) {
            background-color: blue;
            left: 90px;
            top: 90px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <h2>위치 속성과 관련된 공식</h2>
    <div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <h2>위치 속성과 관련된 공식</h2>
</body>

 

<!-- 해결사항 적용 -->

<head>
    <style>
        body>div {
            width: 400;
            height: 200px;
            border: 2px solid black;
            position: relative;
        }
        .box {
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .box:nth-child(1) {
            background-color: red;
            left: 10px;
            top: 10px;
            z-index: 100;
        }
        .box:nth-child(2) {
            background-color: green;
            left: 50px;
            top: 50px;
            z-index: 10;
        }
        .box:nth-child(3) {
            background-color: blue;
            left: 90px;
            top: 90px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <h2>위치 속성과 관련된 공식</h2>
    <div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <h2>위치 속성과 관련된 공식</h2>
</body>

 

O overflow 속성

- 내부의 요소가 부모의 범위를 벗어날 때 처리하는 속성 (부모 요소에 추가)

- 형식 : overflow: hidden | scroll

  • hidden : 영역을 벗어나는 부분을 보이지 않게 만들어서 해결
  • scroll : 영역을 벗어나는 부분을 스크롤로 만들어서 해결
  • 특정 방향 스크롤 생성 시 overflow-x, overflow-y
<head>
    <style>
        body>div {
            width: 400;
            height: 100px;
            border: 1px solid black;
            position: relative;
            overflow: hidden; /* scroll */
        }
        .box {
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .box:nth-child(1) {
            background-color: red;
            left: 10px;
            top: 10px;
            z-index: 100;
        }
        .box:nth-child(2) {
            background-color: green;
            left: 50px;
            top: 50px;
            z-index: 10;
        }
        .box:nth-child(3) {
            background-color: blue;
            left: 90px;
            top: 90px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
</body>

overflow: hidden

 

overflow: scroll

 

◎ 정리

☞ div box 3개 수직으로 생김

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #cccccc;
        }
    </style>
</head>
<body>
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
</body>
</body>

 

 

☞ 색상 들어간 div box 3개 (nth-child 속성) 추가

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #cccccc;
            position: absolute; /* relative */
        }
        .box:nth-child(1) {
            background-color: red;
            left: 10px;
            top: 10px;
            z-index: 1;
        }
        .box:nth-child(2) {
            background-color: green;
            left: 50px;
            top: 50px;
            z-index: 10;
        }
        .box:nth-child(3) {
            background-color: blue;
            left: 90px;
            top: 90px;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div class="box">red box</div>
    <div class="box">green box</div>
    <div class="box">blue box</div>
</body>

position: absolute

 

position: relative

- .box { }에 position: absolute; 변경 시 left, top, z-index 속성 정상적으로 반영되어 박스 겹쳐짐
- .box { }에 position: relative; 시 박스 간격 벌어짐. 겹치지 않음

 

 

☞ body 태그에 h2 태그와 박스를 div로 감싸기 위해 div 태그 추가(위치 관련 공식은...)

<head>
    <style>
        body>div {
            width: 300px;
            border: 2px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #cccccc;
            position: absolute; /* absolute */
        }
        .box:nth-child(1) {
            background-color: red;
            left: 10px;
            top: 10px;
            z-index: 1;
        }
        .box:nth-child(2) {
            background-color: green;
            left: 50px;
            top: 50px;
            z-index: 10;
        }
        .box:nth-child(3) {
            background-color: blue;
            left: 90px;
            top: 90px;
            z-index: 100;
        }
    </style>
</head>
<body>
    <h2>위치 속성 익히기</h2>
    <div>
        <div class="box">red box</div>
        <div class="box">green box</div>
        <div class="box">blue box</div>
    </div>
    <h2>위치 관련 공식이 있다는데...</h2>
</body>

.box {position: absolute;} 적용 시

- 감싼 div는 영역이 없는 수평 라인형태이고, 색상 box는 그대로 있어서 h2, div 태그 위에 있음

 

.box {position: relative;} 적용 시

- height 속성을 크게 주면 색상 box 가 다 들어가나 크게 못 줄 경우는 넘치게 됨

 

<head>
    <style>
        body>div {
            width: 300px;
            border: 2px solid black;
            height: 200px; /* 해결 1 : height */
            position: relative; /* 해결 2 */
            overflow: hidden; /* 해결 3, or scroll */
        }
        .box {
            width: 100px;
            height: 100px; /* 해결 1 : height */
            border: 1px solid #cccccc;
            position: absolute; /* 해결 2 */
        }
        .box:nth-child(1) {
            background-color: red;
            left: 10px;
            top: 10px;
            z-index: 1;
        }
        .box:nth-child(2) {
            background-color: green;
            left: 50px;
            top: 50px;
            z-index: 10;
        }
        .box:nth-child(3) {
            background-color: blue;
            left: 90px;
            top: 90px;
            z-index: 100;
        }
    </style>
</head>
<body>
    <h2>위치 속성 익히기</h2>
    <div>
        <div class="box">red box</div>
        <div class="box">green box</div>
        <div class="box">blue box</div>
    </div>
    <h2>위치 관련 공식이 있다는데...</h2>
</body>

- 내부의 요소가 부모의 범위를 벗어날 때 overflow 속성(hidden or scroll)을 준다.

 

# 참고자료
Do it HTML5 + CSS3 웹 표준의 정석 2016
모던 웹 디자인을 위한 HTML5+CSS3 입문 2015

 

 

'IT(Tip)' 카테고리의 다른 글

웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #8(table style)  (0) 2020.10.05
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #7(float, shadow)  (0) 2020.09.29
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #5(폰트 속성 - font, line-height, text-align)  (0) 2020.09.27
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #4(배경 속성 - background)  (0) 2020.09.26
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #3(박스 속성 - width, height, margin, padding, box-sizing)  (0) 2020.09.25

관련글

댓글

티스토리툴바