絶対位置での位置付け

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>あなたは、それは、通常relativeをstatic以外のものを使用してからオフセットしたい位置。あなたの場合：

.sheets { 
    position: relative; 
} 

トリックを行う必要があります。

EDIT：多分私は質問を誤読しました。スタイルを.sheetまたは.elementsに適用する方が適切かもしれません。

Answer 2

親要素内の要素を親要素に対して絶対的に配置するには（0,0が親要素の左上隅になるように）、親要素を次のように設定して新しい測位コンテキストを作成する必要があります。あなたは<div class="sheet">要素は、新たなポジショニングコンテキストになりたい場合はposition:relative;

その後、次の操作を行います。

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