웹 개발에서 상위 및 브라우저 창과 관련하여 고정 위치 지정은 어떻게 작동합니까?

고정 요소 위치 이해

웹 개발에서 "고정"으로 배치된 요소의 동작은 의문을 제기할 수 있습니다. 부모 및 창을 기준으로 요소 위치 지정에 대해 더 자세히 살펴보겠습니다.

부모를 기준으로 고정 위치 지정

부모를 기준으로 고정된 요소를 고정하려면 자식을 설정합니다. 요소의 위치를 ​​"절대"로 설정하고 상위 요소의 위치를 ​​기본값(정적) 이외의 위치로 설정합니다. 예:

#parentDiv { position: relative; }
#childDiv { position: absolute; left: 50px; top: 20px; }

이렇게 하면 #childDiv가 #parentDiv 위치에서 왼쪽으로 50픽셀, 아래로 20픽셀에 배치됩니다.

창에 상대적으로 고정된 위치

웹 브라우저 창을 기준으로 요소를 고정하려면 위치를 "고정"으로 설정하세요. 그런 다음 "상단", "왼쪽", "오른쪽" 및 "하단"을 사용하여 원하는 위치에 배치할 수 있습니다. 예를 들면 다음과 같습니다.

#yourDiv { position: fixed; bottom: 40px; right: 40px; }

#yourDiv는 창 하단 및 오른쪽 가장자리에서 40픽셀 떨어진 곳에 배치됩니다.

참고: 원래 질문은 "중복"으로 언급되었습니다. "라는 질문은 댓글에서 밝힌 것과 다른 질문을 합니다. 이러한 구별은 위에 제공된 답변에서 강조됩니다.

위 내용은 웹 개발에서 상위 및 브라우저 창과 관련하여 고정 위치 지정은 어떻게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!