🌱 static
position 속성은 일반적인 글의 흐름에 따라 배치되는 요소를 흐름에서 벗어나 자유롭게 배치하고 싶을 때 사용합니다.
'static'은 position 속성의 기본값으로 요소를 일반적인 흐름에 따라 배치합니다.
각각의 요소들은 작성되는 순서대로 우리가 글을 읽는 방향인 왼쪽에서 오른쪽으로 / 위에서 아래로 배치됩니다.
특정 요소 a에 여백을 설정하면 주변 요소들도 해당 값만큼 밀려납니다.
브라우저에서 위치를 정할 때의 기준은 다음과 같습니다.
각각의 속성값을 다르게 주고 싶을 때는 아래와 같이 쓰면 되고,
example1 {
top: 10px;
right: 15px;
bottom: 8px;
left: 20px;
}만약 네 가지 값이 모두 같다면 inset이라는 속성을 사용하여 간단히 나타낼 수 있습니다.
example2 {
inset: 10px;
/*
아래와 같은 의미
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
*/
}
🌱 relative
원래 위치(position: static일 때 배치되었던)를 기준으로 주어진 값만큼 요소를 움직여 배치합니다.
이때, 해당 요소가 차지하고 있던 원래 영역은 그대로 남아있는 상태에서 움직입니다.
점선으로 둘러쌓인 영역이 기준 위치입니다.
🌱 absolute
position 속성이 static이 아닌 = 포지셔닝이 된 자신과 가장 가까운 조상 요소를 기준으로 배치됩니다.
브라우저를 기준으로 배치되었던 원래 자신의 위치에서 완전히 빠져나오기 때문에
기존의 영역은 없어지고 주변에 있던 요소들이 빈자리를 채우게 됩니다.
회색의 둥근 사각형이 기준이 되는 조상 요소입니다.
absolute 속성을 사용하기 위해 포지셔닝 된 조상 요소가 필요하지만 조상 요소에는 포지셔닝이 필요없는 경우,
조상 요소의 position 속성을 relative로 지정하고({position: relative)} 아무런 이동값을 주지 않으면
원래 위치에 남아 있으면서 포지셔닝 된 조상 요소가 됩니다.
🌱 fixed
브라우저 화면을 기준으로 지정된 위치에 완전히 고정되어 배치되는 속성입니다.
화면을 스크롤 하여도 움직이지 않습니다.
원래 자신의 위치에서 완전히 빠져나오기 때문에 기존의 영역은 없어지고 주변에 있던 요소들이 빈자리를 채우게 됩니다.
따라서 fixed 된 요소 뒤에 나머지 요소들이 가려질 수 있어 margin을 조정하여 가려지지 않게 해주어야 합니다.
점선으로 둘러쌓인 영역이 기준 위치(브라우저 화면)입니다.
🌱 sticky
브라우저 화면을 기준으로 static 속성일 때처럼 원래 위치에 배치되어 있다가
화면을 스크롤하며 지정해 둔 위치가 화면의 상단과 만나는 순간, 해당 위치에 고정되어 fixed 속성처럼 동작합니다.
relative 속성처럼 해당 요소가 차지하고 있던 원래 영역은 그대로 남아있는 상태에서 움직입니다.
그림에서 체크 표시가 있는 top: 0인 위치에 붙어있도록 지정하면,
요소는 스크롤 되며 다른 요소들과 함께 화면에서 올라가다가 지정된 위치를 만나 해당 위치에 고정됩니다.
참고로 sticky 속성을 가지고 있던 자식 요소가 들어있던 부모 요소가 화면에서 벗어나면 자식 요소는 sticky 속성을 가지고 있어도 화면 밖으로 사라지게 됩니다.
🌱 z-index 속성
3차원을 표현할 때 x, y, 그리고 z축을 사용합니다.
지금까지 2차원의 브라우저 화면에서 요소를 x, y축으로 움직였다면, z-index값으로 화면에 보일 앞뒤 순서를 정할 수 있습니다.
기본값인 0부터 시작하여 1씩 커지는 자연수로 명시하며, 값이 높을수록 다른 요소들보다 먼저(위에) 보이게 됩니다.
또한, 순서이기 때문에 단위는 필요하지 않습니다.
작동해보기
z-index 사용 시 고려해야할 사항으로 '쌓임 맥락'이라는 개념이 있습니다.
이해하기 어려울 수 있는 개념이지만 중요한 것은 특정 부모 요소 안에 포함된 자식 요소들의 z-index 값은
부모 요소 안에서만 고려되고 부모 밖에 위치한 요소와의 순서에는 영향을 미치지 않는다는 것입니다.
더 자세한 내용은 공식 문서를 참고해주세요.
읽어주셔서 감사합니다:)
