keembloo

position 속성 정리 본문

Html, CSS

position 속성 정리

keembloo 2023. 6. 14. 13:23
728x90

 

 

1. static

 

기본값

 

작성된 순서대로 배치됨

 

2. relative

 

상대위치

 

기존 원래 있던 자리를 기준으로 바뀐다

 

보통은 absolute를 사용하기 위해 부모태그에 relative를 사용한다.

 

3. absolute

 

절대위치

 

부모 태그의 위치 기준으로 바뀐다.

부모 태그에 relative를 줘야 속성을 잘 쓸 수 있다.

 

만약 부모 태그에  relative 속성이 없다면 그 부모의 부모 태그에서  relative속성을 찾는다.

 

계속 없다면?

<body>태그를 기준으로 삼는다.

 

 

top: 0;

left: 0; 을 함께 사용하여 부모 태그의 위치를 확인할 수 있다.

 

 

4. fixed

 

고정위치

웹페이지에 고정시킬때 사용할 수 있다.

사용 예) 헤더 만들어서 페이지에 고정시킬 때

 

이 속성은 부모태그를 기준으로 적용이 되기때문에 부모태그의 영역을 꼭 확인하여야한다.

 

웹페이지 전체에 고정시키고 싶다면

웹페이지 전체영역을 감싸고있는 태그의 자식태그에 적용시킨다.

 

 

 

 

5. sticky

 

스크롤 이동했을 때 고정위치

 

 

 

 

위 속성들을 제대로 입력했는데도 안보인다면

Z-index 속성을 사용해야한다.

 

Z-index

 

겹쳤을때 우선순위를 부여할 수 있다.

높을수록 앞에, 낮을수록 밑에 깔려있는다.

10000까지 입력 가능.

 

 

 

 

728x90

'Html, CSS' 카테고리의 다른 글

html 중앙정렬 하는법 / margin: 0 auto 안될 때  (0) 2023.06.13
SASS (SCSS) 문법 정리  (0) 2023.04.26
Grid로 나눈 레이아웃 활용하기  (0) 2023.04.25
레이아웃 만들기 - Grid  (0) 2023.04.25
브라우저 저장공간, 로컬스토리지 사용법  (0) 2023.04.20
'Html, CSS' Related Articles more