position: absolute
CSS 속성 position의 absolute 값을 사용하면 요소가 형제 요소를 무시하고 대신 relative 또는 absolute로 배치된 가장 가까운 상위 요소를 기준으로 위치를 지정할 수 있습니다. absolute 값은 문서 흐름에서 요소를 완전히 제거합니다. 위치 지정 속성 top, left, bottom 및 right를 사용하면 요소를 예상한 대로 아무 곳에나 배치할 수 있습니다.
.element {
position: absolute;
}position: relative
CSS position 속성의 relative 값을 사용하면 요소가 원래 웹 페이지에 있었던 위치를 기준으로 요소를 배치할 수 있습니다. 오프셋 속성을 사용하여 원래 위치를 기준으로 요소의 실제 위치를 결정할 수 있습니다. 오프셋 속성이 없으면 이 선언은 위치 지정에 영향을 미치지 않으며 position 속성의 기본값 static으로 작동합니다.
.element {
position: relative;
}position: fixed
CSS의 위치 지정은 디자이너와 개발자에게 웹 페이지에 HTML 요소를 배치할 수 있는 옵션을 제공합니다. CSS position는 static, relative, absolute 또는 fixed으로 설정할 수 있습니다. CSS 위치 값이 fixed인 경우 페이지의 특정 위치에 설정/고정됩니다. 고정 요소는 스크롤에 관계없이 동일하게 유지됩니다. 탐색 모음은 사용자가 웹 페이지를 스크롤하면서 탐색 모음에 계속 액세스할 수 있도록 하는 position:fixed;로 자주 설정되는 요소의 좋은 예입니다.
navbar {
postion : fixed;
}display: inline, inline-block, block
CSS의 display 속성은 요소의 렌더 블록 유형을 결정합니다. 이 속성의 가장 일반적인 값은 block, inline 및 inline-block입니다.
block 요소는 앞뒤에 줄 바꿈이 있는 컨테이너의 전체 너비를 차지하며 높이와 너비를 수동으로 조정할 수 있습니다.
inline 요소는 가능한 한 적은 공간을 차지하고 수평으로 흐르며 너비나 높이를 수동으로 조정할 수 없습니다.
inline-block 요소는 나란히 표시될 수 있으며 너비와 높이를 수동으로 조정할 수 있습니다.
.container1 {display: block;}
.container2 {display: inline;}
.container3 {display: inline-block;}