[CSS] 위치 속성
*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.
지금까지 요소의 크기 조절이나 정렬, 스타일 변경 등에 대해서 배웠는데
웹 페이지에서 요소의 위치를 지정하는 법을 배우지 않았다.
그래서 이번에는 위치 속성에 대해 알아보자
1. 절대 위치와 상대 위치
절대 위치
웹 페이지를 기준으로 정확히 어느 위치에 위치하는지를 의미한다.
상대 위치
모든 요소는 원래 자신의 위치를 가지고 있는데, 이 위치를 기준으로 어느 곳에 위치하는지를 의미한다.
2. position 속성
static, absolute, fixed, relative, sticky의 값을 가질 수 있다.
여기서 static, relative는 상대위치이고 absolute, fixed는 절대위치이다. sticky는 상대/절대 혼합이다.
static
default값으로, 특별한 배치 없이 원래의 위치에 배치된다.
div.static {
position: static;
border: 3px solid #73AD21;
}
relative
요소의 원래 위치에서 상하좌우로 이동할 수 있다.
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
absolute
요소가 가장 가까운 위치 지정 조상 요소를 기준으로 배치된다.
페이지의 흐름에서 제거되며 다른 요소와 겹칠 수 있다.
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
bottom: 0px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
relative가 적용된 div 태그 안에 absolute가 적용된 div 태그가 있을 때.
즉, absolute가 자식 요소일 때, 조상 요소를 기준으로 배치가 되므로
relative가 적용된 div 태그의 영역에서 오른쪽 하단에 absolute 요소가 위치하게 된다.
bottom, top, right, left 값을 이용해서 위치를 지정할 수 있다.
각 속성값들의 의미는 아래(위,오른쪽,왼쪽)베이스라인으로부터 요소의 길이를 의미한다고 생각하면 된다.
❗주의할 점❗
absolute 키워드가 적용된 요소의 부모에 div가 있다고 가정해보자.
div태그의 영역은 보통 width가 뷰포트의 가로너비, height가 내부 요소의 크기에 맞게 설정이 된다.
이 때, div태그 안에 absolute요소가 absolute요소들이 페이지의 흐름에서 벗어나기 때문에
div태그의 height가 0으로 인식하게 된다. 즉, div태그가 영역을 차지하지 않게 된다.
따라서 이를 방지하려면 다음을 반드시 알아둬야 한다.
자손의 position 속성에 absolute 키워드를 적용하려면 부모에 height 속성을 입력해야 한다.
또한, div태그가 바로 위에 있으면 absolute 태그가 div태그를 중심으로 움직이지 않고
뷰포트를 기준으로 설정되는 오류가 있다.
이 오류를 해결하기 위해서는 다음을 기억해야 한다.
자손의 position 속성에 absolute 키워드를 적용하려면 부모의 position 속성에 relative 키워드를 적용해야 한다.
fixed
요소가 뷰포트를 기준으로 배치된다.
스크롤을 해도 요소의 위치가 변하지 않는다.
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
위 코드는 bottom이 0이고, right가 0이므로 오른쪽 아래에 위치하게 된다.
sticky
요소가 일반적인 흐름에 따라 배치되다가, 특정 스크롤 위치에 도달하면 고정된다.
네비게이션 바나 광고 배너 등과 같이 특정 위치에 고정되기를 원하는 경우에 사용한다.
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
위 예시 사진을 보면, 스크롤을 내리지 않으면 상대위치로 페이지의 흐름 안에 있지만,
top이 0이 되는 지점에 도달하면 절대위치로 고정되어 페이지의 흐름에서 벗어나게 된다.
3. z-index 속성
z-index는 요소의 순서를 의미한다.
z-index값이 클 수록 상단(가장 앞쪽에) 위치한다.
-값도 가질 수 있으며, -값을 가지면 z-index를 설정하지 않은 요소들보다 뒤에 배치된다.
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
4. overflow 속성
overflow는 내용물이 지정된 영역을 넘쳐날 때 처리하는 방법에 대해 정의한다.
속성값으로는 visible, hidden, scroll, auto가 있다.
overflow속성은 overflow-x와 overflow-y속성으로 나누어 사용할 수 있다.
visible
default 값으로, 지정된 영역을 벗어나도 자르지 않고 모두 보여준다.
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}
hidden
지정된 영역을 벗어나는 것은 잘라서 보여주지 않는다.
div {
overflow: hidden;
}
scroll
가로 세로 방향의 스크롤 바를 생성한다.
단, 내용이 영역을 벗어나지 않았을 때도 스크롤 바는 항상 생성된 채로 있다.
div {
overflow: scroll;
}
auto
scroll과 비슷하지만, 가로 세로 방향이 필요할 때만 생긴다.
즉, 내용이 영역을 벗어나지 않으면 스크롤 바는 생성되지 않는다.
div {
overflow: auto;
}