고정 위치 요소가 상대적 위치 상위 요소에 상대적일 수 있습니까?

상위 요소가 상대적 위치에 있으면 요소가 상위 요소를 기준으로 고정 위치에 배치될 수 있습니까?

소개

이 질문은 고정 위치와 상대 위치 간의 상호작용에 대한 흥미로운 점을 제기합니다. 메서드.

상위 요소를 기준으로 고정 위치 지정

아니요, 상위 요소가 상대적으로 위치하더라도 상위 요소를 기준으로 고정된 위치를 지정하는 것은 불가능합니다. 요소가 고정으로 설정되면 상위 항목의 위치와 상관없이 브라우저 창을 기준으로 배치됩니다.

창을 기준으로 고정 위치

그러나 다음과 같은 작업이 가능합니다. 다음 구문을 사용하여 브라우저 창을 기준으로 고정된 요소의 위치를 ​​지정합니다.

#element {
  position: fixed;
  left: 50px;  // Horizontal position
  top: 50px;   // Vertical position
}

이 예에서 요소 #element 브라우저 창의 왼쪽 가장자리에서 50픽셀, 위쪽 가장자리에서 50픽셀에 위치합니다.

예

다음 HTML 및 CSS 코드를 고려하세요.

<div>
<pre class="brush:php;toolbar:false">#wrapper {
  position: relative;
  width: 300px;
  background-color: orange;
  margin: 0 auto;
}

#feedback {
  position: fixed;
  right: 0;
  top: 120px;
}

이 예에서는 상위 div(#wrapper)가 상대적으로 배치되어 있지만 하위 링크는 (#feedback)은 브라우저 창을 기준으로 고정된 위치에 배치됩니다. 따라서 링크는 상위 위치에 관계없이 브라우저 창의 오른쪽 가장자리에서 0px, 위쪽 가장자리에서 120px에 위치하게 됩니다.