以绝对位置定位答案

【问题标题】：Positioning with the absolute position以绝对位置定位
【发布时间】：2013-05-20 22:19:49
【问题描述】：

下面的 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>

【问题讨论】：

标签： html css css-position

【解决方案1】：

将<div> 定位到您希望它与使用static 以外的其他东西（通常是relative）相抵消。在你的情况下：

.sheets {
    position: relative;
}

应该可以解决问题。

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

【讨论】：

我同意你的看法。您可能还想添加.elements { position: absolute; }。

【解决方案2】：

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

如果您希望 <div class="sheet"> 元素成为新的定位上下文，请执行以下操作：

.sheet
{
    position:relative;
}

这将实现你想要的。

【讨论】：

【解决方案3】：

类表使用相对位置，子类使用绝对位置。

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

【讨论】：