Web page Development A div's exact positioning problem with respect to another div (take the layout of a chess example)

In the process of Web page development, we basically will use the form of div+css in the layout, although the percent of the CSS can satisfy our div will change relative to the size of the browser, but if I want to make a multiple div with a div for precise positioning, Then this method is a little hard, I recently wrote a network chess battle platform, encountered this problem, is how to let my pawn (picture) accurately located in the corresponding amount of the Board (picture) accurate position? At first, I also thought of the definition of the percent of CSS, and then found that the implementation is too difficult, so I finally adopted a JavaScript script, OK, first look at our basic material, here is a I made a board image:

Then here is a picture of a pawn (we'll take for example):

First of all, the position of my board is highly extended to the entire browser height, the width is centered on the corresponding layout code shown below:

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%><! DOCTYPE html>I only emphasize two points here, one is about body and HTML settings I have said in the comments, there is the width of my board set, because we have a chessboard, we must ensure that our lattice is square ah, So when the height is determined, the width of the original image is calculated as a percentage of the length, which is what my code says.qipan_w=height/921*1134The size of my picture is (921*1134).
And then we're going to solve the new problem, how do I put it in the appropriate position on the chessboard? I used the following method, first to open our board picture in PS, and to bring up the grid (because the first time I made this board is the use of grid-drawn checkerboard), and then adjust the position of the board and the size of the canvas so that the width and height of the grid is exactly the number of multiples, (note that the canvas, is not an image ), then the following effect is rendered:

Then we set our starting position at the top left corner of the checkerboard, so we'll find that the starting position is 4 checkers from the left edge of the chessboard, 2 checkers from the top edge of the chessboard, and we'll know that the entire board is 16 checkers wide. The height is 13 checkers, with these we can calculate the size of the checkerboard according to the size of the board (the checkerboard is a square) so there are: SINGLE_QIPAN=HEIGHT/13; then we set the size of each piece is: qizi=single_qipan/1.2; So, the positioning will be simple, it's horizontal position: The distance between the checkerboard and the left edge of the browser +8* the size of the checkerboard-QIZI/2, its vertical position is: the distance between the board and the top edge of the browser +2* the size of the checkerboard-QIZI/2,  and , we can also use the checkerboard to set up an array to locate the position of each piece, but also facilitate the operation of the chess action later. So we define two arrays, each representing the horizontal ordinate of all the pieces (we each have a pawn number from 1~32).
The coordinate position of all the pieces
var array_x=[0,1,2,3,4,5,6,7,8,1,7,0,2,4,6,8,0,2,4,6,8,1,7,0,1,2,3,4,5,6,7,8];
var array_y=[0,0,0,0,0,0,0,0,0,2,2,3,3,3,3,3,6,6,6,6,6,7,7,9,9,9,9,9,9,9,9,9];
And then, we can integrate it, here are:

If you need a friend, you can also look at this code:
   
 
<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%><! DOCTYPE html>





Web page Development A div's exact positioning problem with respect to another div (take the layout of a chess example)