CSS 위치 지정 속성 상대 속성의 상대 위치 지정에 대한 자세한 설명

이 글에서는 CSS 위치 지정 속성의 상대 위치 지정과 관련된 문제를 주로 소개하는 css에 대한 관련 지식을 제공합니다. 상대 위치 지정이란 요소가 이동할 때 원래 위치를 기준으로 한다는 의미입니다. 상대적 위치 지정은 어느 정도 거리를 두고 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

(학습 영상 공유 : css 영상 튜토리얼, html 영상 튜토리얼)

CSS 위치 지정 속성 상대 위치 지정 상대 속성 상세 설명

위치:상대 상대 위치 상세 설명

상대 위치 지정은 위치가 이동되면 해당 요소는 원래 위치를 기준으로 합니다.

상대 위치 지정의 특징:

• 원래 위치를 기준으로 이동합니다(위치 이동 시 기준점이 원래 위치임)

• 표준 스트림의 원래 위치는 계속 점유되며, 후속 위치는 계속됩니다. 상자는 여전히 표준 흐름 방향으로 처리합니다(표준을 벗어나지 않고 원래 위치를 계속 유지합니다). 따라서 상대 위치 지정은 표준에서 벗어나지 않습니다. 가장 일반적인 응용 프로그램은 절대 위치 지정입니다.

상대 위치 지정으로 설정된 요소 상자는 특정 거리만큼 오프셋됩니다. 요소는 위치가 지정되지 않은 모양과 원래 차지했던 공간을 유지합니다.

CSS 상대 위치 지정

상대 위치 지정은 익히기 매우 쉬운 개념입니다. 요소가 상대적으로 배치되면 해당 위치에 표시됩니다. 그런 다음 수직 또는 수평 위치를 설정하여 원점을 기준으로 요소를 이동할 수 있습니다.

상단을 20px로 설정하면 상자는 원래 위치의 상단에서 20픽셀 아래로 이동합니다. 왼쪽을 30픽셀로 설정하면 요소 왼쪽에 30픽셀의 공간이 생성되어 요소가 오른쪽으로 이동합니다.

#box_relative {    position: relative;    left: 30px;    top: 20px;  }

아래 표시된 대로:

상대 위치 지정을 사용할 때 요소는 이동 여부에 관계없이 여전히 원래 공간을 차지합니다. 따라서 요소를 이동하면 해당 요소가 다른 상자를 덮게 됩니다.

예제는 다음과 같습니다. css 비디오 튜토리얼

,

html 비디오 튜토리얼

)

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