CSS 상대 위치 지정과 절대 위치 지정 간의 관계 분석

이 글에서는 CSS의 절대 위치 지정과 상대 위치 지정과 관련된 문제를 주로 소개하는 css에 대한 관련 지식을 제공합니다. 상대 위치 지정이란 요소가 이동할 때 원래 위치를 기준으로 한다는 것을 의미합니다. 요소가 이동하면 상위 요소를 기준으로 살펴보겠습니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

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

position:relative 상대 위치 지정에 대한 자세한 설명

상대 위치 지정이란 요소가 움직일 때 상대적이라는 뜻입니다. 원래 위치를 기준으로 합니다.

상대 위치 지정의 특징:

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

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

position:absolute 절대 위치 지정에 대한 자세한 설명

절대 위치 지정이란 요소가 이동할 때 해당 상위 요소(핀 아빠 유형)를 기준으로 한다는 의미입니다.

절대 위치 지정의 특징:

• 조상 요소가 없거나 조상 요소의 위치가 지정되지 않은 경우 브라우저(문서 문서)를 기준으로 위치 지정됩니다.

• 조상 요소에 위치 지정(상대, 상대, 절대, 고정 위치) 이면 가장 가까운 위치의 조상 요소를 참조점으로 사용하여 위치가 이동됩니다.

• 절대 위치 지정은 더 이상 원래 위치(표준 외)를 차지하지 않습니다.

다음은 자녀 아버지 단계의 유래와 구체적인 용법을 설명합니다.

자녀 아버지 단계의 의미: 자녀가 절대적 위치에 있다면 부모는 상대적 위치에 있어야 합니다.

• 자식은 절대적으로 위치하며 위치를 차지하지 않습니다. 다른 형제 상자에 영향을 주지 않고 부모 상자의 어느 곳에나 배치할 수 있습니다.

• 하위 상자가 상위 상자 내에 표시되지 않도록 제한하려면 상위 상자를 배치해야 합니다.

• 부모 상자를 배치할 때 위치를 차지해야 하므로 부모 상자는 상대적으로만 배치될 수 있습니다.

요약: 부모가 위치를 점유해야 하기 때문에 상대 위치 지정이고, 자식 상자가 위치를 점유할 필요가 없으므로 절대 위치 지정입니다.

예는 다음과 같습니다.

CSS 태그의 상대 위치 및 절대 위치는 위치 속성을 통해 제어됩니다. 상대 위치 및 절대 위치는 요소의 크기와 모양을 변경하지 않고 위치만 변경합니다. 요소의.

1. 위치 속성의 값은 다음과 같습니다.

• static: 기본값, 위치 지정 없음, 요소가 일반 흐름으로 나타납니다.

• absolute: 절대 위치 지정을 사용하여 정적 위치 지정이 아닌 가장 가까운 조상 요소를 기준으로 위치를 지정합니다. 요소의 위치는 왼쪽, 위쪽, 오른쪽 및 아래쪽 속성을 통해 지정됩니다.

• relative: 일반 위치를 기준으로 요소의 위치를 ​​상대적으로 지정합니다.

• fixed: 요소의 위치를 ​​절대적으로 지정하고 브라우저 창을 기준으로 위치를 지정합니다. 요소의 위치는 왼쪽, 위쪽, 오른쪽 및 아래쪽 속성을 통해 지정됩니다.

• inherit: 위치 속성의 값이 상위 요소에서 상속되도록 지정합니다.

포지셔닝을 사용하지 않은 예:

표시 결과는 다음과 같습니다.

2. 상대 포지셔닝

상대 포지셔닝의 기준점은 라벨이 포지셔닝되기 전의 위치이며, 상위 노드, 피어 노드 또는 브라우저와 관련이 없습니다.

   相对定位的元素，通过 left、right 属性来定义水平偏移量，top、bottom 属性来定义垂直偏移量。left 表示相对于原本位置的左外边界右移的距离，right 表示相对于原本位置的右外边界左移的距离，top 表示相对于原本位置的上外边界下移的距离，bottom 表示相对于原本位置的下外边界上移的距离。并且，偏移量可以是正值，也可以是负值，负值表示向相反的方向移动。

   left、right、top、bottom 这 4 个属性的值，可以是长度值（可以是绝对单位或相对单位），也可以是百分比。使用百分比时，水平偏移量根据其父元素 width 属性的值计算得到，垂直偏移量根据其父元素 height 属性的值计算得到。需要注意的是，在设置偏移时，如果父元素没有显式定义 height 属性，就等同于 height 属性的值为 0。

위의 예를 수정하고 div2에 대해 상대 위치 지정을 사용합니다.

효과는 다음과 같습니다.

3. 절대 위치 지정:

절대 위치 지정은 가장 가까운 위치의 조상을 기준으로 지정됩니다. element , 조상 요소가 없으면 문서 본문(브라우저)을 사용하고, 부모가 위치하면 페이지 스크롤과 함께 이동하고, 부모가 위치하지 않으면 계속해서 이동합니다. 부모를 찾아보세요.

절대적으로 배치된 요소는 문서 흐름에서 분리됩니다. 즉, 표준 흐름에서는 직접 삭제되므로 요소의 원래 위치가 차지하게 됩니다.

위의 예를 수정합니다(상위 노드 없음):

효과는 다음과 같습니다.

또 다른 예(상위 노드에 위치 지정이 있음):

절대 위치 지정을 사용하지 않는 경우:

효과는 다음과 같습니다.

절대 위치 지정 사용 :

효과는 다음과 같습니다:

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

위 내용은 CSS 상대 위치 지정과 절대 위치 지정 간의 관계 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!