절대와 상대의 해석_경험교환

샤오이 작가의 블로그: http://andymao.com/

많은 친구들이 저에게 절대값과 상대값을 구별하는 방법과 사용법을 물어보더군요. 우리 모두는 절대가 절대 위치 지정을 의미하고 상대 위치 지정이 상대 위치 지정을 의미한다는 것을 알고 있습니다. 그런데 절대 및 상대 위치는 무엇을 의미합니까? 절대적인 것은 어디에 있고, 무엇에 대한 상대적인 것은 어디에 있습니까? 그렇다면 그들은 어떤 특성을 갖고 있으며 어떤 효과를 낼 수 있습니까? 둘 사이에는 어떤 스킬이 있는 걸까요? 아래에서 하나씩 설명하겠습니다.

Absolute, CSS의 작성 방법은 position:absolute; 브라우저의 왼쪽 상단을 의미하며 TOP, RIGHT, BOTTOM, LEFT(이하 TRBL)와 협력합니다. 설정이 없으면 TRBL을 설정합니다. 기본값은 부모의 원점입니다. TRBL이 설정되고 상위 항목이 위치 속성을 설정하지 않은 경우 현재 절대값은 브라우저의 왼쪽 상단을 원래 지점으로 사용하여 위치가 지정되고 위치는 TRBL에 의해 결정됩니다.

일반적으로 웹페이지를 중앙에 배치하기 위해 Absolute를 사용하면 실수하기 쉽습니다. 왜냐하면 웹페이지는 항상 자동으로 해상도의 크기에 맞춰져 있고 Absolute에서는 브라우저의 왼쪽 상단을 다음과 같이 사용하기 때문입니다. 해상도가 아닌 원래 지점이 변경으로 인해 위치가 변경됩니다. 여기서 많은 사람들이 잘못됩니다. 왼쪽 웹페이지의 특징은 Relative와 매우 유사하지만, 여전히 본질적인 차이점이 있습니다.

Relative, CSS의 작성 방법은 다음과 같습니다. position:relative; 절대 상대 위치 지정을 의미하며, 부모의 원점을 원점으로 참조합니다. parent 그런 다음 BODY의 원점을 원점으로 사용하고 TRBL과 협력하여 부모에 padding과 같은 CSS 속성이 있는 경우 현재 레벨의 원점은 부모의 원점을 참조하여 위치됩니다. 콘텐츠 영역.

때로는 컨테이너의 상하 관계를 설정하기 위해 z-index를 사용해야 할 때도 있습니다. 값이 클수록 위쪽에 있는 값은 자연수입니다. 물론 한 가지 주의할 점은 z-index를 사용하여 부모-자식 관계를 설정 및 설정할 수 없다는 점입니다. 자식은 맨 위에 있어야 하고 부모는 맨 아래에 있어야 합니다.