イメージピースの背景位置を調整する

Question

私は、番号付きのピースを使って背景イメージからパズルを作成しようとしています。作品は最終的にjavascriptで動かすことができます。今、私はこの画像の部分を配置しようとしているだけです。 HTMLにはpuzzleareaと呼ばれるidというdivがあります。新しいdiv要素とその番号が表示されるため、javascriptを子要素に追加しました。 CSSはこのバックグラウンドを基準にしてピースを移動するのを拒否し、2つのテストピースは左上隅に止まり、バックグラウンド位置の値は無視されています。ここでCSSは次のとおりです。

body { 
    text-align: center; 
    font-family: cursive; 
    font-size: 14pt; 
} 

#puzzlearea { 
    width: 400px; 
    height: 400px; 
    margin: auto; 
    position: relative; 
    background-image: url("planck-image.png"); 
} 

.tile { 
    font-size: 40pt; 
    color: red; 
    line-height: 70pt; 
    width: 90px; 
    height: 90px; 
    border: 5px solid black; 
    background-position: -200px -200px; 
    position: fixed; 
} 

更新：Screenshot.

あなたはポジショニングが発生していない理由として任意のアイデアを持っていますか？

Answer 1

.tileにはposition: absoluteが必要です。上部/下部/左/右のパラメータで置き換えることができます（必要なものも必要です）。

fixed位置は、親要素ではなくビューポートを参照します。