Смещение блоков при изменении масштаба
Проблема, пишу шахматы для браузера. Языки html, css, JS. Прописал доску в index.html, после начал в style.css прописывать фигуры (в коде ниже, прописана только одна фигура). Суть в том, что когда в браузере меняю масштаб, пешка начинает "уезжать со своего места", подскажите пожалуйста, что конкретно у меня не так?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<style>
/* .box { text-align: center; background-color: #eeeeee; } */
/* .centered { display: inline-block; margin: 0; } */
.chess-board { border-spacing: 0; border-collapse: collapse;/* position: relative; */z-index: 0; }
.chess-board th { padding: .32px; /*position: relative;*/}
.chess-board td { border: 1px solid; width: 32px; height: 32px; text-align: center; vertical-align: middle;/* position: relative;*/}
.chess-board .white { background: #ffffff; /*position: relative;*/}
.chess-board .black { background: #000000; /*position: relative;*/}
</style>
</head>
<body>
<div class="game">
<table class="chess-board">
<tbody>
<tr>
<th></th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>g</th>
<th>h</th>
<th>i</th>
<th>j</th>
<th>k</th>
<th>l</th>
<th>m</th>
<th>n</th>
</tr>
<tr>
<th>14</th>
<td class="white" id="a14"></td>
<td class="black" id="b14"></td>
<td class="white" id="c14"></td>
<td class="black" id="d14"></td>
<td class="white" id="e14"></td>
<td class="black" id="f14"></td>
<td class="white" id="g14"></td>
<td class="black" id="h14"></td>
<td class="white" id="i14"></td>
<td class="black" id="j14"></td>
<td class="white" id="k14"></td>
<td class="black" id="l14"></td>
<td class="white" id="m14"></td>
<td class="black" id="n14"></td>
</tr>
<tr>
<th>13</th>
<td class="black" id="a13"></td>
<td class="white" id="b13"></td>
<td class="black" id="c13"></td>
<td class="white" id="d13"></td>
<td class="black" id="e13"></td>
<td class="white" id="f13"></td>
<td class="black" id="g13"></td>
<td class="white" id="h13"></td>
<td class="black" id="i13"></td>
<td class="white" id="j13"></td>
<td class="black" id="k13"></td>
<td class="white" id="l13"></td>
<td class="black" id="m13"></td>
<td class="white" id="n13"></td>
</tr>
<tr>
<th>12</th>
<td class="white" id="a12"></td>
<td class="black" id="b12"></td>
<td class="white" id="c12"></td>
<td class="black" id="d12"></td>
<td class="white" id="e12"></td>
<td class="black" id="f12"></td>
<td class="white" id="g12"></td>
<td class="black" id="h12"></td>
<td class="white" id="i12"></td>
<td class="black" id="j12"></td>
<td class="white" id="k12"></td>
<td class="black" id="l12"></td>
<td class="white" id="m12"></td>
<td class="black" id="n12"></td>
</tr>
<tr>
<th>11</th>
<td class="black" id="a11"></td>
<td class="white" id="b11"></td>
<td class="black" id="c11"></td>
<td class="white" id="d11"></td>
<td class="black" id="e11"></td>
<td class="white" id="f11"></td>
<td class="black" id="g11"></td>
<td class="white" id="h11"></td>
<td class="black" id="i11"></td>
<td class="white" id="j11"></td>
<td class="black" id="k11"></td>
<td class="white" id="l11"></td>
<td class="black" id="m11"></td>
<td class="white" id="n11"></td>
</tr>
<tr>
<th>10</th>
<td class="white" id="a10"></td>
<td class="black" id="b10"></td>
<td class="white" id="c10"></td>
<td class="black" id="d10"></td>
<td class="white" id="e10"></td>
<td class="black" id="f10"></td>
<td class="white" id="g10"></td>
<td class="black" id="h10"></td>
<td class="white" id="i10"></td>
<td class="black" id="j10"></td>
<td class="white" id="k10"></td>
<td class="black" id="l10"></td>
<td class="white" id="m10"></td>
<td class="black" id="n10"></td>
</tr>
<tr>
<th>9</th>
<td class="black" id="a9"></td>
<td class="white" id="b9"></td>
<td class="black" id="c9"></td>
<td class="white" id="d9"></td>
<td class="black" id="e9"></td>
<td class="white" id="f9"></td>
<td class="black" id="g9"></td>
<td class="white" id="h9"></td>
<td class="black" id="i9"></td>
<td class="white" id="j9"></td>
<td class="black" id="k9"></td>
<td class="white" id="l9"></td>
<td class="black" id="m9"></td>
<td class="white" id="n9"></td>
</tr>
<tr>
<th>8</th>
<td class="white" id="a8"></td>
<td class="black" id="b8"></td>
<td class="white" id="c8"></td>
<td class="black" id="d8"></td>
<td class="white" id="e8"></td>
<td class="black" id="f8"></td>
<td class="white" id="g8"></td>
<td class="black" id="h8"></td>
<td class="white" id="i8"></td>
<td class="black" id="j8"></td>
<td class="white" id="k8"></td>
<td class="black" id="l8"></td>
<td class="white" id="m8"></td>
<td class="black" id="n8"></td>
</tr>
<tr>
<th>7</th>
<td class="black" id="a7"></td>
<td class="white" id="b7"></td>
<td class="black" id="c7"></td>
<td class="white" id="d7"></td>
<td class="black" id="e7"></td>
<td class="white" id="f7"></td>
<td class="black" id="g7"></td>
<td class="white" id="h7"></td>
<td class="black" id="i7"></td>
<td class="white" id="j7"></td>
<td class="black" id="k7"></td>
<td class="white" id="l7"></td>
<td class="black" id="m7"></td>
<td class="white" id="n7"></td>
</tr>
<tr>
<th>6</th>
<td class="white" id="a6"></td>
<td class="black" id="b6"></td>
<td class="white" id="c6"></td>
<td class="black" id="d6"></td>
<td class="white" id="e6"></td>
<td class="black" id="f6"></td>
<td class="white" id="g6"></td>
<td class="black" id="h6"></td>
<td class="white" id="i6"></td>
<td class="black" id="j6"></td>
<td class="white" id="k6"></td>
<td class="black" id="l6"></td>
<td class="white" id="m6"></td>
<td class="black" id="n6"></td>
</tr>
<tr>
<th>5</th>
<td class="black" id="a5"></td>
<td class="white" id="b5"></td>
<td class="black" id="c5"></td>
<td class="white" id="d5"></td>
<td class="black" id="e5"></td>
<td class="white" id="f5"></td>
<td class="black" id="g5"></td>
<td class="white" id="h5"></td>
<td class="black" id="i5"></td>
<td class="white" id="j5"></td>
<td class="black" id="k5"></td>
<td class="white" id="l5"></td>
<td class="black" id="m5"></td>
<td class="white" id="n5"></td>
</tr>
<tr>
<th>4</th>
<td class="white" id="a4"></td>
<td class="black" id="b4"></td>
<td class="white" id="c4"></td>
<td class="black" id="d4"></td>
<td class="white" id="e4"></td>
<td class="black" id="f4"></td>
<td class="white" id="g4"></td>
<td class="black" id="h4"></td>
<td class="white" id="i4"></td>
<td class="black" id="j4"></td>
<td class="white" id="k4"></td>
<td class="black" id="l4"></td>
<td class="white" id="m4"></td>
<td class="black" id="n4"></td>
</tr>
<tr>
<th>3</th>
<td class="black" id="a3"></td>
<td class="white" id="b3"></td>
<td class="black" id="c3"></td>
<td class="white" id="d3"></td>
<td class="black" id="e3"></td>
<td class="white" id="f3"></td>
<td class="black" id="g3"></td>
<td class="white" id="h3"></td>
<td class="black" id="i3"></td>
<td class="white" id="j3"></td>
<td class="black" id="k3"></td>
<td class="white" id="l3"></td>
<td class="black" id="m3"></td>
<td class="white" id="n3"></td>
</tr>
<tr>
<th>2</th>
<td class="white" id="a2"></td>
<td class="black" id="b2"></td>
<td class="white" id="c2"></td>
<td class="black" id="d2"></td>
<td class="white" id="e2"></td>
<td class="black" id="f2"></td>
<td class="white" id="g2"></td>
<td class="black" id="h2"></td>
<td class="white" id="i2"></td>
<td class="black" id="j2"></td>
<td class="white" id="k2"></td>
<td class="black" id="l2"></td>
<td class="white" id="m2"></td>
<td class="black" id="n2"></td>
</tr>
<tr>
<th>1</th>
<td class="black" id="a1"></td>
<td class="white" id="b1"></td>
<td class="black" id="c1"></td>
<td class="white" id="d1"></td>
<td class="black" id="e1"></td>
<td class="white" id="f1"></td>
<td class="black" id="g1"></td>
<td class="white" id="h1"></td>
<td class="black" id="i1"></td>
<td class="white" id="j1"></td>
<td class="black" id="k1"></td>
<td class="white" id="l1"></td>
<td class="black" id="m1"></td>
<td class="white" id="n1"></td>
</tr>
<div id="Ser_Peshk_1"></div>
<div id="Ser_Peshk_2"></div>
<div id="Ser_Peshk_3"></div>
<div id="Ser_Peshk_4"></div>
<div id="Ser_Peshk_5"></div>
<div id="Ser_Peshk_6"></div>
<div id="Ser_Peshk_7"></div>
<div id="Ser_Peshk_8"></div>
<div id="Ser_Ferz"></div>
<div id="Ser_Lad_1"></div>
<div id="Ser_Lad_2"></div>
<div id="Ser_Kon_1"></div>
<div id="Ser_Kon_2"></div>
<div id="Ser_Slon_1"></div>
<div id="Ser_Slon_2"></div>
<div id="Ser_Korol"></div>
<div id="Krasn_Peshk_1"></div>
<div id="Krasn_Peshk_2"></div>
<div id="Krasn_Peshk_3"></div>
<div id="Krasn_Peshk_4"></div>
<div id="Krasn_Peshk_5"></div>
<div id="Krasn_Peshk_6"></div>
<div id="Krasn_Peshk_7"></div>
<div id="Krasn_Peshk_8"></div>
<div id="Krasn_Ferz"></div>
<div id="Krasn_Lad_1"></div>
<div id="Krasn_Lad_2"></div>
<div id="Krasn_Kon_1"></div>
<div id="Krasn_Kon_2"></div>
<div id="Krasn_Slon_1"></div>
<div id="Krasn_Slon_2"></div>
<div id="Krasn_Korol"></div>
<div id="Zelen_Peshk_1"></div>
<div id="Zelen_Peshk_2"></div>
<div id="Zelen_Peshk_3"></div>
<div id="Zelen_Peshk_4"></div>
<div id="Zelen_Peshk_5"></div>
<div id="Zelen_Peshk_6"></div>
<div id="Zelen_Peshk_7"></div>
<div id="Zelen_Peshk_8"></div>
<div id="Zelen_Ferz"></div>
<div id="Zelen_Lad_1"></div>
<div id="Zelen_Lad_2"></div>
<div id="Zelen_Kon_1"></div>
<div id="Zelen_Kon_2"></div>
<div id="Zelen_Slon_1"></div>
<div id="Zelen_Slon_2"></div>
<div id="Zelen_Korol"></div>
<div id="Sin_Peshk_1"></div>
<div id="Sin_Peshk_2"></div>
<div id="Sin_Peshk_3"></div>
<div id="Sin_Peshk_4"></div>
<div id="Sin_Peshk_5"></div>
<div id="Sin_Peshk_6"></div>
<div id="Sin_Peshk_7"></div>
<div id="Sin_Peshk_8"></div>
<div id="Sin_Ferz"></div>
<div id="Sin_Lad_1"></div>
<div id="Sin_Lad_2"></div>
<div id="Sin_Kon_1"></div>
<div id="Sin_Kon_2"></div>
<div id="Sin_Slon_1"></div>
<div id="Sin_Slon_2"></div>
<div id="Sin_Korol"></div>
<script src="script.js"></script>
</tbody>
</table>
</div>
</body>
</html>
style.css
.game {
width: 500px;
height: 500px;
/* background-image: url(img/14x14_\(на\ 4ых\).png); */
background-size: 500px 500px;
position: relative;
top: 50px;
margin: auto;
}
#Ser_Peshk_1 {
width: 30px;
height: 30px;
background-image: url(img/Серый\ набор/Пешка.png);
background-size: 30px 30px;
position: relative;
left: 127px;
top: 450px;
z-index:1;
}
Источник: Stack Overflow на русском