CSS 위치 속성에서: 절대값과 상대값의 차이

페이지 레이아웃을 위해 position을 사용하는 경우 상위 요소의 위치 속성은 상대적이어야 합니다. 상위 요소 내부의 특정 위치에 있는 요소의 경우 영향을 받지 않으므로 절대값을 사용하는 것이 가장 좋습니다. 패딩의 속성이 영향을 미칩니다. 물론 위치를 사용할 수도 있지만 계산할 때 패딩 값을 잊지 마세요. ”

모든 요소의 기본 위치 속성 값은 정적,

static입니다. 오늘날 51RGB Q 그룹 186242343은 주로 상대(relative) 및 절대(absolute)에 대해 이야기합니다.

[위치:절대]
의미: 절대 위치 지정을 의미합니다. 기본적으로 브라우저의 왼쪽 상단을 나타내며 TOP, RIGHT, BOTTOM, LEFT(이하 참조)와 협력합니다. TRBL) 위치 지정에는 다음과 같은 속성이 있습니다.
1) TRBL이 없으면 부모의 왼쪽 상단을 참조합니다. 부모가 없으면 브라우저의 왼쪽 상단을 참조합니다. 상위 요소가 없는데 텍스트가 있는 경우 마지막 텍스트의 오른쪽 상단을 원점으로 배치하되 텍스트를 분리하여 그 위에 덮지 마십시오.
2) TRBL이 설정되어 있고 부모가 위치 속성을 설정하지 않은 경우 현재 절대값은 브라우저의 왼쪽 상단을 원래 지점으로 하여 위치가 지정되며 위치는 TRBL에 의해 결정됩니다.
3) TRBL이 설정되고 부모가 위치 속성(절대적이든 상대적이든)을 설정하면 부모의 왼쪽 상단이 위치 지정의 원점으로 사용되며 위치는 TRBL에 의해 결정됩니다. 부모에 Padding 속성이 있어도 아무런 영향을 미치지 않습니다. 간단히 말하면, 한 지점만 고집하고 부모의 왼쪽 위 모서리를 위치 지정의 원점으로 사용합니다. 조금도.

위의 세 가지 사항을 요약하면 상위 요소 내에 절대 위치 속성을 갖는 요소를 배치하려면 두 가지 조건만 충족해야 합니다.
첫 번째: TRBL 설정
두 번째: 상위 설정 위치 속성
위 요약은 페이지 레이아웃을 위해 절대값을 사용할 때 페이지가 잘못 정렬되지 않고 브라우저 크기나 모니터 해상도 크기에 따라 변경되지 않도록 하는 데 매우 중요합니다.
불만족스러운 점이 있는 한 요소는 브라우저의 왼쪽 상단을 원점으로 사용합니다. 이곳은 초보자가 실수하기 쉬운 부분입니다. 위치가 지정된 섹션의 크기가 변경되면 그에 따라 상위 요소도 변경됩니다. 그러나 Position 속성이

absolute로 설정된 섹션과 상위 요소의 위치가 변경되어 정렬이 잘못되었습니다. 이는 현재 요소가 브라우저의 오른쪽 상단을 원점으로 사용하기 때문입니다.
초보자가 흔히 범하는 실수는 Position 속성이 절대값인 섹션을 모르는 것입니다. 섹션을 상위 섹션에 배치하려고 하는데 브라우저 크기가 변경되거나 모니터 해상도가 변경될 때 레이아웃이 변경되지 않는 경우입니다. , 두 가지 조건이 모두 충족되는 경우 둘 중 하나라도 충족되지 않으면 요소가 브라우저의 왼쪽 상단을 원점으로 사용하여 페이지 레이아웃이 잘못 정렬됩니다.

[position:relative]
상대 위치 지정을 의미합니다. 기본적으로 상위 요소의 아래쪽이 원점입니다. 텍스트 흐름 순서대로 위치 지정을 위해 TRBL을 사용합니다. 상위 항목에 패딩 등의 CSS 속성이 있는 경우 상위 콘텐츠 영역의 원래 위치를 기준으로 위치가 지정됩니다.
1) TRBL이 없으면 부모 요소를 사용합니다. 요소의 왼쪽 상단, 부모가 없으면 브라우저의 왼쪽 상단을 나타냅니다(절대값과 동일). 첫 번째 지점) 상위 요소가 없는 텍스트가 있는 경우 텍스트의 아래쪽이 원래 지점으로 사용됩니다(절대와는 달리).
2) TRBL이 설정되어 있고 부모가 위치 속성을 설정하지 않은 경우 위치 지정은 여전히 ​​부모의 왼쪽 위 모서리를 원점으로 사용합니다(절대와 다름)
3) TRBL이 설정되고 상위 세트 위치 속성(절대 또는 상대), 상위의 왼쪽 상단 모서리는 위치 지정의 원점으로 사용되며 위치는 TRBL에 의해 결정됩니다(전반은 절대와 동일). 상위 항목에 Padding 속성이 있는 경우 콘텐츠 영역의 왼쪽 위 모서리가 위치 지정의 원점으로 사용됩니다(후반부는 절대값과 다름).

위의 세 가지 점을 통해 부모의 존재 여부, TRBL의 존재 여부에 관계없이 부모의 왼쪽 상단을 기준으로 위치가 지정되지만 부모의 Padding 속성에 의해 결정된다는 결론을 내릴 수 있습니다. 영향을 미칠 것입니다.
위의 상대 설명을 바탕으로 position 속성이 상대적인 p를 TRBL을 사용하여 위치를 지정할 수 있는 일반 p로 간주하거나 일반적인 레이아웃 페이지에서 p의 CSS 속성에 position:relative만 추가하면 됩니다. 그 후에는 float를 사용하여 페이지를 레이아웃할 수 있을 뿐만 아니라 TRBL을 사용하여 페이지를 레이아웃할 수도 있습니다. 즉, position:relative를 사용하는 p도 일반 p처럼 페이지를 레이아웃할 수 있지만 TRBL을 사용하여 페이지를 레이아웃할 수도 있습니다. 페이지. 그러나 위치 속성은 절대적입니다. 레이아웃에 사용하면 모든 p가 브라우저의 왼쪽 상단 모서리를 기준으로 배치되므로 절대 속성이 있는 요소 내부 어딘가에 요소를 배치하는 데만 사용할 수 있으므로 페이지 레이아웃에 사용할 수 없습니다. 이런 식으로 우리는 더 중요한 결론을 요약할 수 있습니다. 절대 속성을 가진 요소는 부모에서 요소의 위치를 ​​찾는 데 사용되므로 처음에 언급한 절대의 세 번째 기사에 따르면 이때 TRBL은 필수입니다. , 상위 요소에
position 속성이 없으면 절대 요소가 상위 요소와 분리되지만 레이아웃 페이지인 경우 상위 요소의 위치 속성은 절대일 수 없습니다. 그렇지 않으면 왼쪽 상단 브라우저의 원본이되므로 상위 요소의 위치 속성은 상대적일 수 있습니다!

상대 속성이 있는 요소는 페이지 레이아웃에 사용할 수 있고 절대 속성이 있는 요소는 상위 요소의 위치를 ​​지정하는 데 사용됩니다.

요약: 위치를 사용하여 페이지 레이아웃을 지정하면 상위 요소의 position 속성은 상대적이어야 하며, 상위 요소 내부의 특정 위치에 위치한 요소의 경우 상위 요소의 padding 속성에 영향을 받지 않으므로 절대값을 사용하는 것이 가장 좋습니다. 물론 그럴 수도 있습니다. 위치를 사용하되 값을 계산할 때 패딩을 잊지 마세요.
하지만 위치 지정은 내부 요소의 높이에 적응하지 못한다는 단점이 있으므로 일반적으로 페이지를 레이아웃할 때 하나 또는 일부 모듈의 높이가 절대 변하지 않으면 위치 지정을 사용할 수 있지만 팬은 다음과 같은 경우를 권장합니다. 페이지를 레이아웃하더라도 여전히 Float를 기본 메소드로 사용하고 Position을 보충 메소드로 사용해야 합니다! 그래야만 고품질의 페이지를 만들 수 있습니다.

마지막으로 제가 한 말을 기억해주세요. "페이지를 레이아웃할 때 Float가 메인이고 Position이 두 번째입니다!"

위 내용은 CSS 위치 속성에서: 절대값과 상대값의 차이의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!