在codepen上的图片库麻烦

Question

我正在尝试在html＆amp;中完成我的第一个项目但是我遇到了一些麻烦。我正在练习使用codepen，我的画廊有点好，但我正在尝试添加最后一行图像，它似乎搞乱了一切，我不知道为什么。有人会介意看看吗？

这是link

出于某种原因，当我试图添加那个国际象棋棋盘时，一切都变坏了。

我还是很陌生，所以我期待学到很多东西。

感谢。

  [1]: http://codepen.io/zenturtle/pen/ezDGC

Answer 1

利润导致问题。使用边距定位元素时，也会推动元素周围的元素。

一种解决方案是使用：position: relative，然后使用定位属性：top，bottom，left，right

实施例：

#chess {
    position: relative;
    left: 555px;
}

另一种解决方案是使用position: absolute。

1. 将position: relative放在<div id="perimeter">
上
2. 在position: absolute
上放置<img>
3. 将每个<img>放置在<div id="perimeter">
所需的位置

示例：

 #chess {
     position: absolute;
     bottom: 122px;
     right: 230px;
 }

这就是你如何将国际象棋图像放在你想要的位置。

CSS技巧很好 article解释position属性。