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

приведенный ниже 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>

html css css-position
person Safari    schedule 25.01.2012    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Поместите <div>, который вы хотите сместить, используя что-то отличное от static, обычно relative. В твоем случае:

.sheets {
    position: relative;
}

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

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

person Ry-♦    schedule 25.01.2012
comment
Я согласен с тобой. Вы также можете добавить .elements { position: absolute; }. - person Tango Bravo; 25.01.2012

arrow_upward
0
arrow_downward

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

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

.sheet
{
    position:relative;
}

Этим вы добьетесь желаемого.

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

person James Shuttler    schedule 25.01.2012

arrow_upward
0
arrow_downward

Используйте относительную позицию для листа класса и абсолютную позицию для его дочерних элементов.

.sheet {
position:relative;
}
.elements {
position:absolute; 
top:0; 
left:0;
}
person Touhid Rahman    schedule 20.05.2013