Позиционирование с абсолютным положением

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

Установите <div> вы хотите, чтобы быть смещена от использования нечто иное, чем static, обычно relative. В вашем случае:

.sheets { 
    position: relative; 
} 

должен сделать трюк.

EDIT: Возможно, я неправильно понял вопрос. Применять стиль на .sheet или .elements может быть более подходящим.

Answer 2

Чтобы элементы в родительском элементе были абсолютно расположены относительно родительского элемента (такой, что 0,0 - верхний левый угол родительского элемента), вам необходимо создать новый контекст позиционирования, установив родительский элемент в position:relative;

Если вы хотите, чтобы ваш <div class="sheet"> элемент будет новый контекст позиционирования, то сделать это:

.sheet 
{ 
    position:relative; 
} 

Это позволит достичь того, что вы хотите.

EDIT: для получения дополнительной информации, проверить этот 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; 
}