網頁開發一個div相對於另外一個div的精確定位的問題（以象棋的佈局爲例）

在網頁開發的過程中，我們在佈局上基本上都會採用div+css的形式，雖然css裏面的百分號可以滿足我們的div會相對於瀏覽器的大小發生變化，但是如果我要讓一個多個div相對於一個div進行精確的定位，那麼這個方法就有些吃力了，我最近再寫一個網絡象棋對戰平臺，就遇到了這個問題，就是如何讓我的棋子（圖片）精確地位於棋盤（圖片）的相應的額精確位置呢？一開始，我也是想到了css的百分號定義，然後發現這個實現太難了，於是我最後採用的是javascript腳本，ok,先看一下我們的基本素材，這裏有一個我自己製作的棋盤圖片：

然後這裏是一個棋子的圖片（我們以將爲例）：

先聲明一下，我這個棋盤的位置是高度擴充到整個瀏覽器的高度，寬度是居中顯示的相應的佈局代碼如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="ie-comp"><!--兼容模式打開  -->
<title>楚河漢界</title>
<style type="text/css">
html,body{<!--這個必須寫，不然的話body是不會擴充到整個瀏覽器的-->
    margin:0px;
    padding:0px;
    height: 100%;
    width: 100%;
    background-image: url(../picture/play_bg.png);
    background-repeat: repeat;
}
.qizi{
   z-index: 2;
}
#background{
   z-index: 0;
}
</style>
<script type="text/javascript">
var qipan_h;
var qipan_w;
var height;
var width;
//js控制的界面的刷新
 function start(){
	 height=document.documentElement.clientHeight;
	 width=document.documentElement.clientWidth;
	 /* console.log("height is "+height);
	 console.log("width is "+width); */
	 qipan_h=height;
	 qipan_w=height/921*1134;
	/*  console.log("height is "+qipan_h);
	 console.log("width is "+qipan_w); */
	 var object=document.getElementById("background");
	 object.style.height=qipan_h;
	 object.style.width=qipan_w;
	 object.style.left=(width-qipan_w)/2;
	 object.style.position="absolute";
	 }
</script>
</head>
<body οnlοad="start();" >
<div id="background">
   <img src="../picture/final_qipan.png" height="100%">
</div>
</body>
</html>

我這裏只強調兩點，一個就是關於body和html的設置我已經在註釋裏面說了，還有就是我的棋盤的寬度的設置，因爲我們一個棋盤，一定要保證我們的格子是正方形啊，所以高度確定之後就按照原始圖片長寬的百分比來計算寬度就是我那個代碼寫的那樣qipan_w=height/921*1134;我的圖片的大小是（921*1134）。

然後我們來解決新的問題，如何讓我的將，位於棋盤的相應位置呢？我使用的是如下的方法，首先把我們的棋盤圖片在ps中打開，並且調出網格（因爲最開始我製作這個棋盤的時候就是利用網格畫的棋盤格），然後調整棋盤的位置和畫布的大小使之的寬度和高度恰好是網格的整數倍數，（注意是畫布，不是圖像），然後就會呈現下面的效果：

然後我們設置我們的起始位置是棋盤格的最左上角那個位置，於是我們會發現，這個起始位置距離棋盤的左邊緣4個棋盤格，距離棋盤的上邊緣2個棋盤格，而且我們還會知道，整個棋盤的寬度是16個棋盤格。高度是13個棋盤格，有了這些我們就可以根據棋盤的大小來計算棋盤格的大小了（棋盤格是正方形）於是有：single_qipan=height/13;然後我們設置每個棋子的大小是：qizi=single_qipan/1.2;所以呢，這樣來定位將就簡單了，它的的橫向位置：棋盤和瀏覽器左邊緣的距離+8*棋盤格的大小-qizi/2，它的縱向位置就是：棋盤和瀏覽器上邊緣的距離+2*棋盤格的大小-qizi/2，而且，我們還可以利用棋盤格建立一個數組來定位各個棋子的位置，也便於以後的下棋動作的操作。於是我們來定義兩個數組，分別代表所有棋子的橫縱座標（我們個們每個棋子編號從1~32）於是有

//所有的棋子的座標位置
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];

然後呢，我們就可以整合一下了，下面是效果圖：

有需要的朋友也可以看看這段代碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="ie-comp"><!--兼容模式打開  -->
<title>楚河漢界</title>
<style type="text/css">
html,body{
    margin:0px;
    padding:0px;
    height: 100%;
    width: 100%;
    background-image: url(../picture/play_bg.png);
    background-repeat: repeat;
}
.qizi{
   z-index: 2;
}
#background{
   z-index: 0;
}
</style>
<script type="text/javascript">
var qipan_h;
var qipan_w;
var height;
var width;
var qizi;
var single_qipan;
//所有的棋子的座標位置
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];
//js控制的界面的刷新
 function start(){
	 height=document.documentElement.clientHeight;
	 width=document.documentElement.clientWidth;
	 /* console.log("height is "+height);
	 console.log("width is "+width); */
	 qipan_h=height;
	 qipan_w=height/921*1134;
	/*  console.log("height is "+qipan_h);
	 console.log("width is "+qipan_w); */
	 var object=document.getElementById("background");
	 object.style.height=qipan_h+"px";
	 object.style.width=qipan_w+"px";
	 object.style.left=(width-qipan_w)/2+"px";
	 object.style.position="absolute";
	 single_qipan=height/13;
	 qizi=single_qipan/1.2;
	 x0=(width-qipan_w)/2+qipan_w/16*4;
	 y0=height/13*2;
	 for(var i=0;i<32;i++){
    	 initqizi(i+1, array_x[i], array_y[i]);
		}
	 }
 function initqizi(number,x,y){
	 var qizi_object=document.getElementById(number+"");
	 qizi_object.style.height=qizi+"px";
	 qizi_object.style.width=qizi+"px";
	 qizi_object.style.left=x0+x*single_qipan-qizi/2+"px";
	 qizi_object.style.top=y0+y*single_qipan-qizi/2+"px";
	 qizi_object.style.position="absolute";
 }
</script>
</head>
<body οnlοad="start();" >
<div id="background">
   <img src="../picture/final_qipan.png" height="100%">
</div>
<div class="qizi" id="1">
    <img src="../picture/qizi_green_che.png" height="100%" >
</div>
<div class="qizi" id="2">
    <img src="../picture/qizi_green_ma.png" height="100%">
</div>
<div class="qizi" id="3">
    <img src="../picture/qizi_green_xiang.png" height="100%">
</div>
<div class="qizi" id="4">
    <img src="../picture/qizi_green_shi.png" height="100%">
</div>
<div class="qizi" id="5">
    <img src="../picture/qizi_green_jiang.png" height="100%">
</div>
<div class="qizi" id="6">
    <img src="../picture/qizi_green_shi.png" height="100%">
</div>
<div class="qizi" id="7">
    <img src="../picture/qizi_green_xiang.png" height="100%">
</div>
<div class="qizi" id="8">
    <img src="../picture/qizi_green_ma.png" height="100%">
</div>
<div class="qizi" id="9">
    <img src="../picture/qizi_green_che.png" height="100%">
</div>
<div class="qizi" id="10">
    <img src="../picture/qizi_green_pao.png" height="100%">
</div>
<div class="qizi" id="11">
    <img src="../picture/qizi_green_pao.png" height="100%">
</div>
<div class="qizi" id="12">
    <img src="../picture/qizi_green_zu.png" height="100%">
</div>
<div class="qizi" id="13">
    <img src="../picture/qizi_green_zu.png" height="100%">
</div>
<div class="qizi" id="14">
    <img src="../picture/qizi_green_zu.png" height="100%">
</div>
<div class="qizi" id="15">
    <img src="../picture/qizi_green_zu.png" height="100%">
</div>
<div class="qizi" id="16">
    <img src="../picture/qizi_green_zu.png" height="100%">
</div>
<div class="qizi" id="17">
    <img src="../picture/qizi_red_bing.png" height="100%">
</div>
<div class="qizi" id="18">
    <img src="../picture/qizi_red_bing.png" height="100%">
</div>
<div class="qizi" id="19">
    <img src="../picture/qizi_red_bing.png" height="100%">
</div>
<div class="qizi" id="20">
    <img src="../picture/qizi_red_bing.png" height="100%">
</div>
<div class="qizi" id="21">
    <img src="../picture/qizi_red_bing.png" height="100%">
</div>
<div class="qizi" id="22">
    <img src="../picture/qizi_red_pao.png" height="100%">
</div>
<div class="qizi" id="23">
    <img src="../picture/qizi_red_pao.png" height="100%">
</div>
<div class="qizi" id="24">
    <img src="../picture/qizi_red_che.png" height="100%">
</div>
<div class="qizi" id="25">
    <img src="../picture/qizi_red_ma.png" height="100%">
</div>
<div class="qizi" id="26">
    <img src="../picture/qizi_red_xiang.png" height="100%">
</div>
<div class="qizi" id="27">
    <img src="../picture/qizi_red_shi.png" height="100%">
</div>
<div class="qizi" id="28">
    <img src="../picture/qizi_red_shuai.png" height="100%">
</div>
<div class="qizi" id="29">
    <img src="../picture/qizi_red_shi.png" height="100%">
</div>
<div class="qizi" id="30">
    <img src="../picture/qizi_red_xiang.png" height="100%">
</div>
<div class="qizi" id="31">
    <img src="../picture/qizi_red_ma.png" height="100%">
</div>
<div class="qizi" id="32">
    <img src="../picture/qizi_red_che.png" height="100%">
</div>

</body>
</html>

AAArlex

發佈了40 篇原創文章 · 獲贊 38 · 訪問量 20萬+

私信關注

網頁開發一個div相對於另外一個div的精確定位的問題（以象棋的佈局爲例）

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

大齡程序員思考

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

nuget添加readme

Unity3d實現的十字路口的模擬（一）

如何在csdn的文章中加入圖片

關於解決adt升級之後打開layout變慢甚至卡掉的問題

關於調用android4.4系統的圖片與剪切版的黑邊問題

Unity3d實現的十字路口的模擬（三）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結