상위 또는 브라우저 창을 기준으로 고정된 요소를 배치하는 방법은 무엇입니까?

위치 요소: 상위 또는 창을 기준으로 고정

귀하의 질문은 CSS를 사용하여 상위 요소를 기준으로 "고정" 요소를 배치하는 데 중점을 두고 있습니다. 요소가 고정 위치에 있으면 해당 위치는 상위 요소가 아닌 뷰포트를 기준으로 결정됩니다.

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

원하는 경우 상위 요소를 기준으로 고정된 요소를 배치하려면 다음 CSS 속성을 사용할 수 있습니다.

#parent {
  position: relative;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
}

이렇게 하면 #child 요소가 배치됩니다. 상위 #parent 기준 아래로 50픽셀, 오른쪽으로 50픽셀.

창을 기준으로 고정된 요소 배치

창을 기준으로 고정된 요소를 배치하려면 , 다음 CSS 속성을 사용할 수 있습니다.

#element {
  position: fixed;
  top: 50px;
  right: 50px;
}

이렇게 하면 #element 요소가 50픽셀 아래에 배치됩니다. 위쪽 및 브라우저 창 오른쪽 가장자리에서 50픽셀.

예

다음 예를 고려하세요.

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

#child {
  position: absolute;
  right: 0;
  top: 120px;
}

In 이 예에서 #child 요소는 해당 상위 요소인 #parent를 기준으로 고정된 위치에 배치됩니다. 수직으로 스크롤할 때 상위 요소와 함께 이동하지만 오른쪽으로 0픽셀, 상위 요소 상단에서 120픽셀 아래로 유지됩니다.