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

Question

HTML-код ниже - моя HTML-разметка, и я хочу, чтобы позиционирование внутри этой области шаблона было абсолютным.Но когда я делаю это прямо сейчас, меня позиционируют из верхнего левого угла, но я хочу, чтобы позиция (left: 0, top: 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;
}

должно помочь.

РЕДАКТИРОВАТЬ: Может быть, я неправильно понял вопрос.Применение стиля к .sheet или .elements может быть более подходящим.

Answer 2

Используйте относительную позицию для листа класса и абсолютную позицию для его детей.

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

Answer 3

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

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

.sheet
{
    position:relative;
}

Это достигнет того, что вы хотите.

РЕДАКТИРОВАТЬ: для получения дополнительной информации, ознакомьтесь с этой статьей о различиях между значениями позиционирования CSS и абсолютное позиционирование внутри относительного позиционирования