계발하는 개발자

앞서 정리한 relative,absolute 속성에 이어 position 2편입니다. position 각 속성과 정의는 앞선 장에 자세히 설명되어 있으니 이번 장에서는 제외하겠습니다. ↓↓ 앞장 내용은 이전 포스팅 참고 ! [CSS] position: relative, absolute 속성(1) (3) position: fixed - 실습 예제 먼저 fixed는 요소를 일반적인 문서 흐름에서 제외하고, 지정된 위치에 고정시키는 속성입니다. 일반적인 문서 흐름에서 제외된다는 말은 앞서 배운 absolute 속성과 비슷하나, 지정된 위치에 착! 고정시키는 것은 fixed 만의 고유한 특징이니 잘 기억해두시기 바랍니다. 첫번째라고 여러 번 쓰인 div, pos 라는 클래스명을 가진 div, 두번째라고 여러 번..

[ position 정의 ] position은 문서 상에 요소를 배치하는 방법을 정의하는 속성입니다. position이 요소의 배치 방법(너비, 높이값을 통한 정적인 위치 지정)을 결정하면, top, bottom, right, left가 상대적인 최종 위치를 결정하는 방식입니다. 더보기 position: 난 이렇게 배치할거야; top: 윗면에서부터 얼만큼 떨어뜨릴거야; right: 오른쪽면에서부터 얼만끔 떨어뜨릴거야; bottom: 아랫면에서부터 얼만큼 떨어뜨릴거야; left: 왼쪽면에서부터 얼만큼 떨어뜨릴거야; => 상하좌우 위치 지정은 필요에 따라 선택적으로 사용!(4개 속성 모두 필수 지정해야하는 것은 아님) [ position 속성 ] - position 속성에는 다음 속성값들을 지정할 수 있습니..

z-index 속성은 요소의 쌓임 순서(stack order)를 정의하는 속성입니다. 정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성입니다. -> 위치 지정 요소(positioned element)란, position 속성이 정의되어 있는 요소를 말합니다. (relative, absolute, fixed, static, sticky 등 ) 우리가 html문서를 작성해서 요소들을 만들어주면 요소들은 문서의 흐름에 따라 차곡차곡 배치된다는 게 우리가 알고있는 기본입니다. 그러나 포지션 속성들을 통해 요소의 위치를 조작해주는 경우에는, 요소들이 동일한 위치에서 겹쳐버리는 현상이 발생할 수 있는데요..! 이런 경..