▶ position의 display 수정 - position: absolute, position: fixed이 적용된 요소는 display 속성의 값이 대부분 block으로 수정됨. - cf. float 속성과 유사. float의 display 수정: developing-move.tistory.com/124 [CSS] float의 display 수정 ▶ CSS float 참조: developing-move.tistory.com/123 - float 속성이 추가된 요소는 display 속성의 값이 대부분의 경우 block으로 수정됨. - 의 전형적인 inline 속성. - 에 display: block; 적용 시 결과 화.. developing-move.tistory.com - position: stati..

▶ position: sticky - 스크롤 영역을 기준으로 배치 - top/left/right/bottom 중 특정한 값이 하나 이상 존재해야 하고 그렇게 부여된 값이 스크롤 영역에 맞닿았을 경우에만 동작함. - Internet Explorer 지원 불가. [사용 예시] - position: sticky가 적용된 타이틀 부분이 스크롤을 내릴 때 화면 상단에 고정된 채 같이 내려오다 section이 끝나면 멈추고, 이후 section 영역이 달라지면 해당 section의 타이틀이 스크롤을 따라 내려옴. - 이전에는 javascript를 통해 상당히 어렵게 구현되던 기능이었으나 sticky 사용 시 이와 같이 구현 가능. - 스크롤되는 영역을 기준으로 배치하기 때문에 viewport 전체에 고정하는 개념처..

▶ position: fixed; - 브라우저(viewport)를 기준으로 배치됨. - viewport에 기반한 위치 배치는 position: absolute를 통해서도 할 수 있음. - 이전 글 position: absolute 참조 - developing-move.tistory.com/128 [CSS] position: absolute ▶ position: absolute; - 부모 요소를 기준으로 배치. - 여기서의 부모요소는 기본적인 HTML의 구조적인 부모가 아닌 위치상의 부모 요소를 의미. - position: absolute; 지정 시 3번 박스는 사라짐. - 이.. developing-move.tistory.com - position: absolute는 결과적으로 부모 요소를 기준으로 함...

▶ position: absolute; - 부모 요소를 기준으로 배치. - 여기서의 부모요소는 기본적인 HTML의 구조적인 부모가 아닌 위치상의 부모 요소를 의미. - position: absolute; 지정 시 3번 박스는 사라짐. - 이때 3번 박스는 2번 박스 뒤에 숨어 있는 것. - position: absolute;가 부여된 2번 박스는 부모 요소를 기준으로 배치될 준비를 끝냄. - 1, 2, 3 순서로 쌓이는 개념이 존재하지 않고 1, 3번 박스에 대한 상관관계를 무시. - 2번 박스 공중으로 붕 뜬 상태와 같이 되고 3번 박스는 밀려서 1번 박스 아래에 위치하게 된 것. - 3번 박스의 크기를 늘릴 경우 2번 박스 뒤편에 있는 것을 확인할 수 있음. - position: absolute;에 ..

▶ position: relative; - 자기 자신을 배치 기준으로 삼음. - position: relative;만 입력 시 자신을 기준으로 배치될 준비만 하는 것. - top/left/right/bottom의 속성을 입력해 줘야 이동함. - 자신이 있었던 위치에서 위에서 20px, 왼쪽에서 150px 이동. - 3번 박스는 원래 있던 그 위치 그대로 있음. - 2번 박스의 경우 원래 위치 그대로 남아 있는 것이고 화면상에 보이는 2번 박스는 일종의 홀로그램. - 이때 1번 박스를 지우면 위로 올라감. - 2번 박스는 1번의 영향을 받고, 3번에 영향을 주는 형국. - relative로 위치를 잡으면 자신을 기준으로 하다 보니, 주변 형제 요소의 영향을 주거나 받기 때문에 이에 유의하여 사용해야 함.

▶ position - 요소의 위치 지정 방법의 유형/기준을 지정. - 요소를 특정 위치에 배치하기 위해서는 기준이 필요함. - 이때 position을 통해 직접 배치하는 것은 아니고 기준을 설정하는 것. [속성 값] - static: 유형(기준) 없음. 배치 불가능. 기본값. - 모든 요소는 배치할 준비가 안 되어 있는 상태. - 배치를 위해서는 아래의 값들을 사용해야 함. - relative: 요소 자신을 기준으로 배치. - absolute: 위치상 부모 요소를 기준으로 배치. - fixed: 브라우저(뷰포트)를 기준으로 배치. - sticky: 스크롤 영역 기준으로 배치. - position: absolute; 사용. - 부모 요소를 기준으로 배치됨. - 이때 부모 요소인 .parent에는 posi..