절대 위치로 위치 지정

Question

아래의 HTML 코드는 HTML 태그이며이 템플릿 영역 내의 위치 지정은 절대적입니다. 하지만 지금 당장이 작업을 수행 할 때 왼쪽 상단 모서리에서 배치해야하지만 위치 (왼쪽 : 0, 위쪽 : 0)는 클래스 시트의 왼쪽 위 모서리가되고 싶습니다.

이렇게 할 수 있습니까?

<div class="sheets" data-bind="foreach: pages"> 
    <div class="sheet"> 
     <div class="elements"> 
      <div data-bind="template: { name: 'image', foreach: Elements }"> 

      </div> 
     </div> 
    </div> 
</div> 

Answer 1

위치 당신이 보통 relative, static보다 다른 것을 사용하는 오프셋 할 <div>. 귀하의 경우 :

.sheets { 
    position: relative; 
} 

트릭을해야합니다.

편집 : 어쩌면 내가 질문을 잘못 읽었을 것입니다. .sheet 또는 .elements에 스타일을 적용하는 것이 더 적절할 수 있습니다.

Answer 2

부모 요소의 요소를 부모 요소의 상대 위치로 절대적으로 배치하려면 (0,0이 부모 요소의 왼쪽 위 모서리이므로) 부모 요소를 다음과 같이 설정하여 새 위치 지정 컨텍스트를 만들어야합니다. 당신이 당신의 <div class="sheet"> 요소가 새로운 위치 문맥하고 싶다면 position:relative;

다음을 수행하십시오

.sheet 
{ 
    position:relative; 
} 

이것은 당신이 원하는 것을 달성 할 것이다.

편집 : 자세한 내용은, 그것을위한 클래스 시트 및 절대 위치이 article on the differences between CSS positioning values 및 absolute positioning inside relative positioning

Answer 3

를 사용하여 위치를 확인 아이입니다.

.sheet { 
position:relative; 
} 
.elements { 
position:absolute; 
top:0; 
left:0; 
}