Contents
[ Position 속성 ][ Position 속성 ]
1. static
2. relative
- 내 앞에 있는 것과 상대적 위치를 결정할 수 있다. (연관되어서 위치를 결정할 수 있다.)
absoulte랑 부모-자식 같은 느낌으로 자주 쓰인다.
3. absoulte
- 기본적으로 html은 도화지가 1장, absoulte는 도화지를 한장 덧대는 것
- 아이콘 집어넣을 때 사용
- 부모 지정 없이 absoulte를 주게 되면 부모가 body가 된다. → body를 기준으로 top과 left의 위치가 결정
z-index는 요소의 쌓임 순서를 지정하는 속성.
즉, 어떤 요소가 다른 요소 위에 나타날지를 결정
높은 z-index 값을 가진 요소는 낮은 z-index 값을 가진 요소 위에 나타나게 된다.
→ 유지ㆍ보수가 힘들기 때문에 가급적 사용하지 않는게 좋다.
- absoulte는 부모를 변경할 수 있고 그 부모는 relative 속성이어야 한다.
4. fixed
- 자식은 inline이나 inline-block 이어야한다.
- 모든 디자인의 배치의 기본은 부모가 결정 (= 배치는 부모로부터의 상대적 위치)
- 자식은 인라인이나 인라인 블록이어야 한다.
Share article
