Position 속성
CSS 에서 사용되는 속성으로, HTML 문서 상에서 요소가 배치되는 방식을 결정한다. CSS 를 이용한 레이아웃에 사용되며, 일단 position 속성으로 위치의 기준을 정해준 뒤 top, bottom, left, right 속성으로 구체적인 위치를 정한다.
Position 속성의 종류
- Static
position 속성의 default 값으로, 기존에 정해진 HTML 문서상에서 정해진 위치를 차지하고, nomal flow를 따른다. position 속성이 static 값일 경우, top, bottom, left, right 의 속성값들은 적용되지 않는다.
- Relative
static 이었던 기존 위치를 기준으로 하여, 그 위치에서 상대적으로 움직인다. top, bottom, left, right 의 속성 값만큼 거리를 남기고 위치가 이동한다. 예를 들어,top: 30px인 경우, 기존 static 위치에서 위에 30px 의 거리를 남기고 아래로 30px 이동한다. 참고로, 기존의 위치는 차지하고 있으므로 페이지의 구조가 달라지진 않는다.
- Asolute
position 이 static 이 아닌 가장 가까운 상위요소(조상요소)를 기준으로 한다. 만약 해당 요소의 상위에 position 이 static 인 요소가 없다면, 최상위에 있는 body 요소가 기준이 된다. 그래서 보통은 기준으로 삼으려는 상위요소를 relative 로 설정값을 주는 것이 일반적이다. top, bottom, left, right 속성에 대해서는 기준 요소 내에서 주어진 속성값만큼 떨어진 거리에 위치한다. 예를 들어,top: 30px이고 기준이 body 인 경우, 화면 맨 위 모서리에서 30px 만큼 거리에 위치하게 된다.
주의해야 할 점은, 해당 요소의 position이 absolute가 되면 더 이상 주변의 요소들과는 상호작용 하지 않는다. 아예 독립적인 요소가 되어, 기존에 차지하던 자리는 다른 요소가 밀려서 차지하게 되고, 페이지의 구성이 바뀔 수 있다.
- Fixed
사용자가 보는 브라우저 창이 기준이 되어 사용자가 화면을 움직이더라도 정해진 위치가 고정된다. top, bottom, left, right 속성에 대해선 브라우저 창 내에서 주어진 속성값만큼 떨어진 거리에 위치한다. 예를 들어,left: 30px인 경우, 브라우저 창 왼쪽 끝에서 30px 떨어진 위치에 고정되어 사용자가 화면을 움직여도 움직이지 않는다.
fixed 도 absolute와 마찬가지로 기존의 주변 요소들과는 상호작용 하지 않기 때문에, 기존에 차지하던 자리는 다른 요소가 밀려서 차지하게 되고, 페이지의 구성이 바뀔 가능성이 있으므로 주의한다.
- Sticky
fixed와 마찬가지로 사용자가 보는 브라우저 창을 기준으로 하지만, 특이하게도 브라우저 화면을 스크롤할 때 효과가 나타난다. 그리고 sticky 된 요소는 부모요소의 안에서만 움직이게 된다.
구체적으로 설명해보자면, 일단 브라우저 창과의 기준이 되는 위치를 정해주고, 부모요소가 이 기준 밖에 있는 경우엔 static 의 위치를 유지하다가, 사용자가 화면을 스크롤하여 부모요소가 기준 안으로 들어오면 sticky된 대상이 기준 위치에 고정된다.
예를 들어,top: 50px인 경우, 대상이 들어있는 부모요소 안에 브라우저 창 위에서 50px 거리의 기준점이 들어오면 그 기준점에 대상이 고정된다. 그리고 기준점이 부모요소를 영역을 벗어나면 다시 대상은 원래의 static 위치로 돌아간다.
주의해야 할 점이 몇가지 있다.
1) 상위 요소, 그리고 그 위의 상위요소에 overflow: auto, hidden, scroll 속성이 들어가 있으면 작동하지 않는다.
2) 부모요소가 flexbox 인 경우, align-self: flex-start 를 추가한다.
2번과 같은 경우엔 개인적으로 이해가 힘들어 예시를 만들었다.
<body>
<div class="container">
<aside class="camera">
<div class="img"></div>
<p class="description">내가 찍은 사진들</p>
</aside>
<main class="pictures">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</main>
</div>
</body>* {
box-sizing: border-box;
}
body {
margin: 0;
}
.img {
width: 100px;
height: 100px;
background-color: green;
}
.container {
display: flex;
}
.camera {
margin: 30px;
display: flex;
flex-direction: column;
align-items: center;
position: sticky;
top: 0;
}
.pictures {
display: flex;
flex-direction: column;
gap: 10px
}https://jsfiddle.net/cksdyd324/tcnq18fy/3/
위는 jsfiddle 페이지인데, 직접 실행해보도록 하자.
참고로 jsfiddle 에서는 사진을 초록블럭으로 대체하였다. 위 css 파일에서는 왼쪽의 사진기 사진과 텍스트를 묶은 블록을 sticky 속성값을 추가해 고정시키려 했는데, 아무리 스크롤해도 고정이 안되는 모습을 볼 수 있다. 이유가 무엇일까?
그것은 전체 블록인 container가 flexbox 이기 때문이다. flexbox 의 align-items: 속성의 디폴트 값이 stretch 인데, 이 때문에 사진기와 텍스트가 담긴 박스는 container에 위 아래 전반에 걸쳐 영역을 차지하게 된다. 때문에 아무리 스크롤을 해도 부모요소인 container에 갇힌 블록은 움직일 수가 없는 것이다.
이에 대한 해결방법은 사진기와 텍스트가 담긴 블록인 .camera에 align-self: flex-start 를 추가해주면 된다. 이 속성은 블록을 flexbox 처음부분으로 블록을 위치시키기 때문에 영역이 제한되고 블록이 움직일 공간이 생기게 된다. 위 경우엔 .container에 align-items: flex-start를 추가해주어도 되지만, 이 속성은 다른 요소들까지 위치를 옮기므로 첫번째 방법을 사용하도록 하자.
