CSS의 절대 및 상대_CSS/HTML 이해

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

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

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

CSS의 작성 방법은 position:relative입니다. 절대 상대 위치 지정을 의미합니다. 상위 항목이 없으면 BODY의 원래 위치를 사용합니다. TRBL과 결합된 원점 위치 지정을 위해 상위 항목에 패딩 등 CSS 속성이 있는 경우 상위 콘텐츠 영역의 원점을 기준으로 현재 레벨의 원점을 위치시킵니다.

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