javascript - 调整图像 block 的背景位置

Question

我正在尝试用带编号的背景图片制作拼图。这些作品最终将可以使用 javascript 移动。现在，我只是试图定位这张图片的各个部分。 html 有一个名为 puzzlearea 的 id 的 div，我已经用 javascript 附加了 child ，我知道这是有效的，因为它显示了新的 div 部分及其编号。 CSS 拒绝相对于此背景移动片段，我的两个测试片段卡在左上角，似乎忽略了我的背景位置值。这是 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

您需要 position: absolute 在 .tile 上，以便能够将它们与顶部/底部/左侧/右侧参数一起放置(您也需要这些参数) .

fixed 位置指的是视口(viewport)，而不是父元素。