목차
2. position: static
3. position: relative
4. position: absolute
5. position: fixed
6. position: sticky
7. position을 사용해서 장바구니 예제 만들기
position
문서 상에 요소를 배치하는 방법을 지정한다.
값에는 static, relative, absolute, fixed, sticky가 있다.
position: static
기본값이며, 요소를 일반적인 문서 흐름에 따라 배치한다. top, right, left, bottom, z-index 속성이 아무런 영향도 주지 않는다.
position: relative
static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값이다. top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능하다. 주로 부모요소에게 지정한다.
position: absolute
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 대신 가장 가까운 위치 지정 조상 요소(상위 요소)에 대해 상대적으로 배치한다. 즉, 단, DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정된다.
만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 된다. 최종 위치는 top, right, bottom, left으로 지정한다.
어떤 요소의 display 속성을 absolute로 설정하면, 부모 요소의 display 속성을 relative로 지정해주는 것이 관례다.
내가 암기한 꿀팁
relative: 내가 상대적인 기준이 되겠다.
absoule: 절대적으로 부모를 따르겠다.
position: fixed
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다. 즉, fixed 속성은 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이다.
화면을 위아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않는 UI를 만들 때 활용할 수 있다.최종 위치는 top, right, bottom, left 값으로 지정한다.
position: sticky
sticky 속성은 "스크롤 동작"(overflow가 hidden, scroll, auto 혹은 overlay)이 존재하는 가장 가까운 조상에 달라붙는다.
sticky 속성은 기준점을 이상을 넘지 않을 때는 relative 포지션처럼 동작하다가 그 이상을 넘게 될 시에는 fixed 속성과 같이 동작하게 된다. 그러다 스크롤이 scroll 박스 밖으로 벗어나게 될 경우에는 그 위치에서 정지하게된다.
position을 사용해서 장바구니 예제 만들기
position을 사용해서 아래와 같은 예제를 만들어보았다. (떡볶이가 먹고 싶은건 안비밀)
1. 포지션을 지정하지 않고 스타일만 입힌 태초의 상태이다.
(CSS를 누르면 확인 가능합니다!)
See the Pen Untitled by Git ini (@hwanghaein) on CodePen.
2. .cart-container(부모요소)에 position: relative를 줘서 배치의 기준이 되게끔 만든다
3. 자식 요소에 전부 position: absoulte를 준다 (다 겹쳐도 당황하지않는다)
See the Pen Untitled by Git ini (@hwanghaein) on CodePen.
4. 위에서부터 차례로 배치한다 (top, left, right, bottom 사용)
.product-price { left: 20px; top: 60px; } // 상품 이름 (분홍색)
.count { right: 20px; top: 50px; } // 카운트 상자 (노란색)
.minus { left:10%; } // - 기호
.number{ left: 45%; } // 수량
.plus{ right: 10%; } // + 기호
.total{ left: 20px; top: 100px; } // 상품 가격 (라임색)
.total-price{ right: 20px; top: 50%; } // 총합계 (하늘색)
.cancle{ left: 20px; bottom: 20px; } // 취소 버튼
.add-cart{ right: 20px; bottom: 20px; } // 장바구니 담기 버튼
*참고) minus, number, plus는 count상자 내에서 따로 배치를 해야하기 때문에, count상자에 relative를 주고 minus, number, plus에는 absolute를 사용해서 배치한다. (count에는 결국 relative와 absolute가 둘다 적용되게된다. count는 cart-container의 자식이자, minus, number, plus의 부모이기 때문에)
5. 색깔을 뺀 완성본
See the Pen Untitled by Git ini (@hwanghaein) on CodePen.
6. position: fixed 를 사용해서 뷰포트 중간 위치에 고정시켜보았다. (스크롤해도 고정됨)
팝업창을 만들때 아주 많이 사용되는 방법이다.
0.5x 크기로 보시길 바랍니다!
See the Pen Untitled by Git ini (@hwanghaein) on CodePen.
참고 자료
https://engkimbs.tistory.com/922
https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
'Languages > CSS3' 카테고리의 다른 글
| [CSS] 마우스 hover 시에 붕 뜨는 효과 넣기 (JS 사용X) (0) | 2023.07.30 |
|---|---|
| [CSS] grid 정복기 (2) | 2023.05.06 |
| [CSS] flex 정복기 (0) | 2023.04.27 |
| [CSS] box-sizing (박스 사이징) (1) | 2023.04.27 |
