position

종류

1. static : 정적위치, HTML에 작성된 순서 그대로 위치 (default)

2. relative : 상대위치, 요소가 원래 위치에서 벗어나면서 원래 위치 기준으로 top, left, right, bottom 등을 사용하여 위치

3. absolute : 절대위치, 요소의 static이 아닌 가장 가까운 부모 기준으로부터 위치

4. fixed : 고정위치, 스크롤에 영향 받지 않는 절대적인 고정 위치, viewport 기준으로 고정된다

5. sticky : 고정위치이지만 fixed와 다르게 처음에는 relative처럼 동작하다가 지정한 offset이 부모요소에 닿으면 그 때부터 고정된다

😄 static

.element {
	position : static;
}

• 웹페이지의 흐름에 따라 요소들을 차례대로 위치
• left, right, top, bottom 영향 안받는다

😄 relative

.element {
	position : relative;
}

• 일반적으로 자식요소가 absolute라면 부모요소를 relative로 지정해준다

😄 absolute

.element {
	position : absolute;
}

• position이 static이 아닌 가장 가까운 부모 요소 기준으로 위치 설정
• 조상 요소가 전부 static이라면 body 기준으로 위치 설정
• HTML에서 독립되어 앞뒤에 나온 요소와 상호작용 하지 않는다

😄 fixed

.element {
	position : fixed;
    top : 0;
    right : 0;
}

• viewport 기준으로 위치 설정
• 웹페이지가 스크롤 되어도 요소는 절대적으로 고정된 위치
• HTML에서 독립되어 앞뒤에 나온 요소와 상호작용 하지 않는다

😄 sticky

.element {
	position : sticky;
    top : 0;
    right : 0
}

• left, right, top, bottom 등 지정 필수
• 지정한 offset이 부모 요소에 닿으면 그 때부터 고정된다

😄 z-index

.element {
	z-index : 1;
}

• 겹쳐지는 요소들의 스택 순서 결정
• 크기가 클수록 앞쪽에 위치하고 크기가 작을수록 뒤쪽에 위치

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍