상대 위치

요소의

속성을 ​​로 설정하고 그 레이아웃은 position 요소와 동일합니다. 그런 다음 렌더링 된 상자는 relative 또는 static 속성을 ​​기반으로 수직으로 움직이며/또는 또는 속성에 따라 수평으로 이동합니다. , top, , 및 bottom 속성은 렌더링 후 상자가 움직이는 거리를 지정하는 데 사용됩니다. 양수 값은 상자가 해당 위치에서 반대 방향으로 이동할 것임을 나타냅니다. 예를 들어, left는 상자를 오른쪽으로 20 픽셀로 이동합니다. 반대 방향에 음수 값을 적용하면 같은 효과를 얻을 수 있습니다. right는 와 동일한 효과를 갖습니다. 이 속성의 초기 값은 top이며, 이는 계산 된 값 0 (0)을 만듭니다. 즉, 움직임이 발생하지 않습니다. 분명히, 동일한 요소에 대해 right 및 bottom를 지정하는 것은 의미가 없습니다. 위치가 과도하게 제한되기 때문입니다. 컨텐츠 방향이 왼쪽에서 오른쪽으로되면 left 값이 사용되며 left: 20px는 무시됩니다. 오른쪽에서 왼쪽 방향에서 "right: -20px value"가 승리합니다. 와 left: 20px 둘 다 지정되면 auto가 사용되며 는 무시됩니다. 렌더링 된 상자 만 포지셔닝 요소와 관련이있을 때만 움직이기 때문에,이 포지셔닝 체계는 컨텐츠 열을 배치하는 데 실용적이지 않습니다. 상대적 위치는 종종 상자를 여러 픽셀로 이동 해야하는 경우에 사용되지만, 더 복잡한 레이아웃을 위해 부유 식 요소의 부정적인 마진과 함께 사용할 수 있습니다. left right 컨트롤에는 블록 left right가 포함됩니다 right 상대 위치의 한 가지 부작용은 매우 편리합니다. 상대 위치 지정 요소는 "국소화"되므로 절대 포지셔닝 후손에게 포함 된 블록이됩니다. 이를 통해 블록이 포함 된 위치를 제어 할 수있는 사용하기 쉬운 도구를 제공합니다. 상자 자체를 움직이지 않고 top로 bottom로 설정하십시오. top CSS의 상대적 위치에 대한 FAQ CSS의 상대적 위치와 절대 포지셔닝의 차이점은 무엇입니까? bottom CSS에서 속성은 요소의 위치 지정 메소드 유형을 지정하는 데 사용됩니다.

:

,

, , , 및 의 5 가지 값이 있습니다. 상대 위치와 절대 포지셔닝은 가장 일반적으로 사용되는 두 가지 방법입니다.

상대 위치는 정상 위치에 대한 요소의 위치를 ​​말합니다. 이는 ,

,

및 position 속성을 ​​설정하면 요소가 정상 위치에서 이동하게됩니다. 그러나 다른 요소는 요소가 남긴 간격에 맞게 조정되지 않습니다. relative 반면에, 절대 포지셔닝을 사용하면 가장 가까운 위치 조상에 비해 요소를 배치 할 수 있습니다. 절대적으로 배치 된 요소에 조상이없는 조상이 없으면 문서 본문을 사용하고 페이지 스크롤로 이동합니다.

z-index 속성은 어떻게 상대적 위치에 작용합니까?

css의

속성은 겹치는 요소의 수직 스태킹 순서를 제어합니다. 따라서, 상대 위치와 함께 사용하여 겹치는 요소의 디스플레이 순서를 제어 할 수 있습니다. 속성은 위치가있는 요소 (, z-index, z-index 또는 )에만 적용됩니다. position: absolute 값을 갖는 요소는 position: relative가 지정되지 않은 경우, 요소는 HTML 문서에 나타나는 순서로 쌓입니다. position: fixed 비율 값을 상대 위치에서 상단, 오른쪽, 하단 및 왼쪽 속성으로 사용할 수 있습니까? position: sticky 예, 비율 값을 , ,

및 상대 위치에서

속성으로 사용할 수 있습니다. 백분율 값을 사용하면 블록을 포함하는 요소의 크기와 관련이 있습니다. 예를 들어, 를 설정하면 포함 된 블록 높이의 절반 아래로 요소를 움직입니다. z-index 상대 위치를 위해 한 방향 (예 : 상단 또는 왼쪽) 만 지정하면 어떻게됩니까? z-index 상대 위치에 대해 한 방향 (예 : z-index 또는 ) 만 지정하면 요소가 지정된 값에 따라 해당 방향으로 이동합니다. 다른 쪽 ()은 영향을받지 않으며 요소는 해당 측면에서 움직이지 않습니다.

디스플레이와 함께 상대 위치를 사용할 수 있습니까? Flex 또는 Display : Grid?

예,

또는 top와 함께 상대 위치를 사용할 수 있습니다. right 속성은 속성과 무관하므로 모든 디스플레이 유형과 함께 모든 포지셔닝 메소드를 사용할 수 있습니다. 그러나 일부 조합은 이러한 특성이 상호 작용하는 방식으로 인해 예상 결과를 얻지 못할 수 있습니다. bottom 상대 포지셔닝은 문서의 프로세스에 어떤 영향을 미칩니 까? left 상대 위치는 일반 문서 스트림에서 요소를 제거하지 않습니다. 대신 주변 레이아웃을 변경하지 않고 요소의 위치를 ​​변경합니다. 이것은 요소의 공간이 마치 정상 위치 인 것처럼 레이아웃에 남아 있음을 의미합니다. top: 50% 상대 위치에서 음수 값을 상단, 오른쪽, 하단 및 왼쪽 속성으로 사용할 수 있습니까?

예, 상대 위치에서 음수 값을 , ,

및

속성으로 사용할 수 있습니다. 음수 값은 요소를 반대 방향으로 움직입니다. 예를 들어,

를 설정하면 요소가 20 픽셀로 이동합니다. top CSS에서 상대적 위치의 목적은 무엇입니까? left CSS의 상대 위치는 다른 요소의 레이아웃에 영향을 미치지 않고 요소의 위치를 ​​조정하려고 할 때 사용됩니다. 절대적으로 배치 된 아동 요소에 대한 컨텍스트를 만들려면 유용합니다. right 상대적 위치는 마진, 패딩 및 테두리와 같은 다른 CSS 속성과 어떻게 상호 작용합니까?

, 및

특성은 요소의 크기와 주변 공간에 영향을 미칩니다. 이러한 속성은 상대 위치 지정이 정상 프로세스와 같은 방식으로 작동하는 것과 동일한 방식으로 작동합니다. 비교적 배치 된 ,

, margin 및 padding 속성은 요소를 정상 위치에서 이동하지만 요소의 크기 나 주변 공간에 영향을 미치지 않습니다. border 상대적 위치 요소의 상단, 오른쪽, 하단 및 왼쪽 특성에 애고 할 수 있습니까? top 예, CSS 전환 또는 애니메이션을 사용하여 상대 위치 지정 요소의 , right, bottom 및 left 특성을 애니메이션 할 수 있습니다. 이렇게하면 화면 외부에서 미끄러지거나 페이지에서 이동하는 요소와 같은 다양한 효과가 발생할 수 있습니다.

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