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;
}

应该这样做。

编辑：也许我误解了这个问题。将样式应用于.sheet或.elements可能更合适。

Answer 2

要使父元素中的元素相对于父元素绝对定位（使得0,0是父元素的左上角），您需要通过将父元素设置为{来创建新的定位上下文{1}}

如果您希望position:relative;元素成为新的定位上下文，请执行以下操作：

<div class="sheet">

这将达到你想要的效果。

编辑：有关详细信息，请查看此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;
}

用绝对位置定位

3 个答案: