CSS의 위치 지정 속성은 무엇입니까?

CSS의 위치 지정 속성은 상위 요소나 다른 요소를 기준으로 요소의 위치를 ​​제어하는 ​​데 사용됩니다. 주요 위치 지정 속성은 다음과 같습니다. 정적: 요소가 일반 문서 흐름에서 위치를 차지합니다. 상대: 요소는 현재 위치를 기준으로 오프셋되지만 문서 흐름에는 유지됩니다. 절대: 요소가 문서 흐름에서 제거되고 위치 지정 속성이 있는 가장 가까운 상위 요소를 기준으로 위치가 지정됩니다. 고정: 요소가 뷰포트에 고정되고 브라우저 창을 기준으로 배치됩니다.

CSS의 위치 지정 속성

위치 지정 속성은 문서에서 요소의 위치를 ​​제어하는 ​​데 사용되는 CSS의 주요 속성입니다. 주로 상위 요소나 다른 요소를 기준으로 요소의 위치를 ​​결정하는 데 사용됩니다.

다양한 유형의 위치 지정 속성

CSS에서는 다음과 같은 주요 위치 지정 속성이 제공됩니다.

• static: 요소는 일반 문서 흐름에서 위치를 차지하며 위치 지정 속성의 영향을 받지 않습니다. 이는 기본 타겟팅 속성입니다.
• relative: 요소는 현재 위치를 기준으로 오프셋되지만 문서 흐름에는 남아 있습니다.
• 절대: 요소는 문서 흐름에서 벗어나 위치 속성이 있는 가장 가까운 상위 요소를 기준으로 배치됩니다.
• 고정: 요소는 뷰포트에 고정되어 브라우저 창을 기준으로 위치가 지정되며 페이지를 스크롤해도 움직이지 않습니다.

위치 지정 예제

다음 코드 예제는 다양한 위치 지정 속성의 사용을 보여줍니다.

<code class="css">/* static定位 */
p {
  color: blue;
}

/* relative定位 */
div {
  position: relative;
  top: 20px;
  left: 50px;
}

/* absolute定位 */
span {
  position: absolute;
  top: 0;
  right: 0;
}

/* fixed定位 */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}</code>

이렇게 하면 파란색 텍스트 단락(정적 위치 지정), 자체 위치를 기준으로 위쪽으로 20픽셀, 왼쪽으로 50픽셀 떨어진 div 오프셋이 생성됩니다( 상대 위치 지정), 상위 요소의 상단과 오른쪽을 기준으로 위치가 지정된 범위(절대 위치 지정), 페이지 상단과 왼쪽에 고정된 탐색 모음(고정 위치 지정)이 있습니다.

위 내용은 CSS의 위치 지정 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!