CSS위치 포지셔닝

Position 속성은 요소의 레이아웃을 설정하는 데 사용되는 위치 지정 메커니즘을 정의합니다. 모든 요소를 ​​배치할 수 있지만 요소를 절대적으로 또는 고정하면 요소 유형에 관계없이 블록 수준 상자가 생성됩니다. 요소를 상대적으로 배치하면 일반 문서 흐름의 기본 위치에서 오프셋됩니다.

일반적으로 Position 요소에는 다음을 포함한 5가지 속성이 있습니다.

1.절대(정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 절대 위치 지정 요소를 생성합니다. 요소의 위치는 위쪽, 왼쪽, 오른쪽, 아래쪽으로 설정됩니다.)

　2.fixed (absolute와는 다른 절대 위치 요소를 생성합니다. Fixed는 브라우저 창을 기준으로 위치를 지정합니다. 요소의 위치 설정 방법은 절대 요소와 동일합니다.)

3.relative(브라우저 창을 기준으로 상대적으로 배치된 요소를 생성합니다. 따라서 "left:20px;"는 요소의 왼쪽 위치에 20픽셀을 추가합니다.)

　4.static(위치 요소의 기본값, 위치 지정이 없으므로 이 요소는 일반적인 문서 흐름에 나타납니다)

　5.inherit (상위 요소에서 상속받아야 할 position 속성 값을 설정합니다.)

아래에는 다양한 속성에 대한 몇 가지 예제 코드가 나열되어 있습니다.

　1.절대속성

　
　　
　　
　　

　　　
　　　

절대 위치 지정이 적용된 제목입니다

　　　

절대 위치 지정을 사용하면 요소를 페이지에 언제든지 배치할 수 있습니다. 위치. 아래 제목은 페이지 왼쪽에서 100px, 페이지 상단에서 150px 떨어진 곳에 위치합니다.