프론트개발을 하다보면 css가 생각보다 시간을 잡아 먹을 때가 많은데
개념을 잘 잡고가면 활용하기 좋아서 개념잡기용으로 position 렛츠고우우 !
우선 position란 ?
요소에 사용되는 위치 결정 방법의 유형을 지정하는것
아래 5가지 유형을 가지고 있다!
- static : 기본값
- relative
- fixed
- absolute
- sticky
여기서 static 의 경우, 잘 사용하지는 않지만 항상 페이지의 기본적인 흐름에 따라 배치된다
top, bottom, left, 및 right 속성에 의해 영향을 받지 않는다
Relative 위치 활용 예시
relative는 정상(상위) 위치에 대하여 상대적으로 위치되는데
아래 예시를 보면, 정상(상위) 위치 기준으로 왼쪽으로 30px 떨어진 곳에 위치된 부분을 볼 수 있음
Fixed 위치 활용 예시
fixed 요소는 페이지가 스크롤 되더다도 항상 같은 위치에 유지되는데,
예를들면 버튼 하단 네비게이션바를 만들 때 아주 유용하게 사용 할 수 있습니다!
버튼 제일 밖에 있는 태그에 fixed를 주었고, z-index : 99를 준 이유는
포스팅카드에 안 가려지도록 구현 했습니다
const Footer = styled.div`
position: fixed;
bottom: 0px;
width: 100%;
max-width: 420px;
z-index: 99;
`;
아래는 z-index 를 1로 주었을 때 겹쳐지는 모양!
발견하고 z-index 사용해서 버튼을 가장 위쪽으로 배치 시켰습니다!
Absolute 위치 활용 예시
절대적(absolute) 위치 요소는 정적(static)이 아닌 위치를 가지는 부모 요소(parent element)에 상대적으로 위치된다.
이러한 요소가 없으면, 그를 담는 블록은 <html>이다 ( 좀 더 쉬운 용어로 찾아보기! )
" 좋아요 " 기능 구현을 할 때 absolute 활용하였는데
absolute 위치 요소는 다른 요소들과 겹쳐질 수 있습니다.
이미지 태그 위에 좋아요버튼을 위치 시켜준 예시입니다
img태그 position: relative가 부모요소라, Like 태그는 absolute 활용하여서 이미지 위에 배치 시킨것!
const Img = styled.img`
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
position: relative;
z-index: 9;
`;
const Like = styled.img`
size: 10px;
position: absolute;
bottom: 10px;
right: 10px;
z-index: 90;
`;
Sticky 위치 활용 예시
sticky 요소는 스크롤 위치에 따라 relative 와 fixed 사이를 전환합니다. 주어진 오프셋 위치가 뷰포트에서 충족 될 때까지 상대적(position:relative)으로 배치된 다음, 주어진 위치에 "고정(stick)" 됩니다 (position:fixed 처럼)!!
sticky는 아직 활용한 적이 없어서 블로그 참고하여 가져왔습니다!
하기 사이트 들어가시면 예제 보실 수 있습니다!
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com
참고
댓글