위치 포지셔닝 이해

html에는 레이아웃을 변경하는 방법이 두 가지가 있습니다. 하나는 float이고 다른 하나는 위치입니다. 포지셔닝, 오늘은 포지션 포지셔닝이 무엇인지 설명드리겠습니다.

위치는 CSS에서 매우 중요한 속성입니다. 위치 속성을 통해 일반 위치, 상위 요소 또는 브라우저 창을 기준으로 요소를 오프셋할 수 있습니다.

위치 속성 위치 지정에는 4가지 유형이 있습니다. 이러한 유형은 요소 생성 방식에 영향을 미칩니다. 아래에서는 위치 속성을 자세히 설명합니다.

Position에는 4 속성 값이 있습니다: 1.static, 2.relative , 3.절대, 4.고정. 이러한 속성.

정적: 기본 위치 지정입니다. 위치를 변경하지 않고 웹 페이지는 일반적인 문서 흐름 규칙에 따라 배열됩니다.

상대: 상대 위치 지정입니다. 요소는 일반적인 문서 흐름에 따라 정렬됩니다. 하지만 left, top, bottom, rightetccss 요소의 위치를 ​​변경하는 규칙입니다. 웹페이지를 더욱 아름답게 만들어보세요.

절대

: 절대 위치 지정입니다. 요소는 문서 흐름에서 분리됩니다. top, left, right, bottom 및 기타 css 규칙 요소의 위치를 ​​변경합니다. 귀하의 웹 페이지를 아름답게 만드십시오.

고정

: 고정 위치입니다. 요소는 일반 문서 흐름에서 분리되며 요소는 브라우저의 고정 위치에 설정되고 요소와 함께 스크롤되지 않습니다. 요소를 전달할 수 있습니다: top, left, right, 하단etccss 규칙은 요소의 위치를 ​​변경합니다.

절대

: 정적 요소가 아닌 가장 가까운 수준 위치의 상위 요소를 기준으로 절대 위치를 생성합니다. 설정 절대화되면 문서 흐름에서 분리되어 원래 공간을 차지하지 않고 를 대체합니다. relative는 중국어로 이 속성을 설정한 후 요소가 위쪽, 왼쪽, 아래쪽, 오른쪽에 따라 오프셋됩니다. 중요한 점은 원래 공간이 그대로 유지된다는 것입니다.

Fixed(이전

IE는 지원되지 않음)는 일반적으로 브라우저 창을 기준으로 위치가 지정되는 절대적(고정) 위치 요소를 생성합니다. 및

상대

는 일반적인 위치에서의 위치 지정을 기준으로 상대 위치 지정을 생성하는 요소입니다.

Static이 속성 값은 모든 요소의 기본 위치입니다. 일반적인 상황에서는 이를 구체적으로 선언할 필요가 없지만 상속이 발생하면 요소의 상속을 보고 싶지 않은 경우가 있습니다. 속성은 자체적으로 영향을 미치므로 요소 위치 지정의 기본값을 복원하는 position:static을 사용하여 상속을 취소할 수 있습니다.

상속: 속성 상속, 은 위치 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

! 참고: 많은 웹페이지가 중앙에 위치하므로 요소가 절대적으로 배치되면 해상도에 따라 표시에 차이가 발생합니다. 이 경우 다음과 유사한 방법을 통해 처리할 수 있습니다.

　

　

　

위는 html의 CSS 속성 중 위치 속성에 대한 설명입니다. CSS의 위치 기능은 매우 강력하며 매우 실용적인 위치 지정 속성이기도 합니다. 나는 위치 위치 지정이 웹 디자인에서 매우 일반적으로 사용되는 속성이라고 생각합니다. 내 설명이 도움이 되기를 바랍니다.