首先Position在字面講是位置的意思，在HTML中是定位的意思，它有四種屬性：分別是static是靜態的，也是預設的效果，沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。 absolute（絕對定位） absolute(絕對定位)不光脫離了文本流，而且在文本流中也不會給這 ...
首先Position在字面講是位置的意思，在HTML中是定位的意思，它有四種屬性：分別是static是靜態的，也是預設的效果，沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。
absolute（絕對定位）
absolute(絕對定位)不光脫離了文本流，而且在文本流中也不會給這個絕對定位元素留下專屬空位。這就好比是一個工廠里的職位，如果有一個工人走了 自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成為了自由體。絕對定位將可以通過TRBL(TOP、RIGHT、BOTTOM、LEFT簡 稱TRBL)來設置元素，使之處在任何一個位置。在父層position屬性為預設值時，TRBL的坐標原點以body的坐標原點為起始。
relative(相對定位)只可以在文本流中進行位置的上下左右的移動，雖然他的表現區脫離了文本流，但是在文本流卻依然為其保留了一席之地，這就好比 一個打工的人他到了外地，但是在老家依然有一個專屬於他的位置，這個位置不隨他的移動而改變。這樣很明顯就會空出一塊空白來，如果希望文本流拋棄這個部分 就需要用到絕對定位。
fixed (固定定位)
生成固定定位的元素，相對於瀏覽器視窗進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
下麵我用<三國殺>的實例具體講一下Position的應用 ：
<html>
<head>
<title>三國殺</title>
<style>
*{padding:0;margin:0;}
a{text-decoration:none;}
ul{list-style:none;}
body{width:800px;margin: 0 auto;background:black;position:relative;}
#bg{width:800px;height:600px;background-size:800px 600px;background-image:url(image/bgfight01.jpg);position:relative;} #card{width:155px;height:175px;position:relative;float:left;margin-left:5px;margin-bottom:5px;}
#card #c1{width:155px;height:175px;background-size:100%;background-image:url(jiang/jlvbu_1200.jpg);position:absolute;}
#card #c2{width:155px;height:175px;background-size:100%;background-image:url(image/vaiqu.png);position:absolute;} #card #c3{width:155px;height:175px;position:absolute;}
#c4{width:24px;height:36px;background-size:100%;background-image:url(image/vwei.png);position:absolute;top:17px;right:1px;}
#c5{width:15px;height:13px;background-size:100%;background-image:url(image/vtili.png);position:absolute;top:60px;right:4px;}
#c6{width:15px;height:13px;background-size:100%;background-image:url(image/vtili.png);position:absolute;top:79px;right:4px;}
#c7{width:15px;height:13px;background-size:100%;background-image:url(image/vtili.png);position:absolute;top:96px;right:4px;}
#c8{width:15px;height:13px;background-size:100%;background-image:url(image/vtili.png);position:absolute;top:115px;right:4px;}
#c9{position:absolute;top:142px;right:12px;color:white;}
.k1{position:absolute;top:449px;left:171px;}
.k2{position:absolute;top:456px;left:176px;}
.k3{position:absolute;top:449px;left:218px;}
.k4{position:absolute;top:456px;left:224px;}
.k5{position:absolute;top:449px;left:270px;}
.k6{position:absolute;top:456px;left:275px;}
.k7{position:absolute;top:449px;left:318px;}
.k8{position:absolute;top:456px;left:326px;}
.huatuo{width:174px;height:170px;position:absolute;right:0px;top:434px;}
.ht{width:152px;height:160px;background-image:url(jiang/jhuatuo_1200.jpg);position:absolute;background-size:100%;right:10px;}
.yy{width:174px;height:180px;background-image:url(image/vp1qu.png);position:absolute;background-size:174px 180px;bottom:0px;}
.jn1,.jn2{width:47px;height:51px; background-image:url(image/vjineng.png);background-size:47px 55px;position:absolute;left:18px;top:100px;text-align:center;color:#f00;font-weight:bold;line-height:22px;padding-top:4px;}
.jn2{left:68px;}
.x{width:15px;height:13px;background-size:100%;background-image:url(image/vtili.png);position:absolute;left:117px;top:51px;}
</style>
</head>
<body>
<div id="bg">
<div id="card">
<div id="c1">
</div>
<div id="c2">
</div>
<img src="image/vp1cannot.png" id="c3" style="background-image:url(jiang/jmenghuo_1200.jpg);">
<ul>
<li id="c4">
</li>
<li id="c5">
</li>
<li id="c6">
</li>
<li id="c7">
</li>
<li id="c8">
</li>
<li id="c9">4
</li>
</ul>
</div>
<div id="card">
<div id="c1">
</div>
<div id="c2">
</div>
<img src="image/vp1cannot.png" id="c3" style="background-image:url(jiang/jdengai_1200.jpg)">
<ul>
<li id="c4">
</li>
<li id="c5">
</li>
<li id="c6">
</li>
<li id="c7">
</li>
<li id="c8">
</li>
<li id="c9">4
</li>
</ul>
</div>
<div id="card">
<div id="c1">
</div>
<div id="c2">
</div>
<img src="image/vp1cannot.png" id="c3" style="background-image:url(jiang/jguanyu_1200.jpg)">
<ul>
<li id="c4">
</li>
<li id="c5">
</li>
<li id="c6">
</li>
<li id="c7">
</li>
<li id="c8">
</li>
<li id="c9">4
</li>
</ul>
</div>
<div id="card">
<div id="c1">
</div>
<div id="c2">
</div>
<img src="image/vp1cannot.png" id="c3" style="background-image:url(jiang/jdiaochan_1200.jpg)">
<ul>
<li id="c4">
</li>
<li id="c5">
</li>
<li id="c6">
</li>
<li id="c7">
</li>
<li id="c8">
</li>
<li id="c9">4
</li>
</ul>
</div>
<div id="card" style="margin-right:0;">
<div id="c1">
</div>
<div id="c2">
</div>
<img src="image/vp1cannot.png" id="c3" style="background-image:url(jiang/jshensima_1200.jpg);">
<ul>
<li id="c4">
</li>
<li id="c5">
</li>
<li id="c6">
</li>
<li id="c7">
</li>
<li id="c8">
</li>
<li id="c9">4
</li>
</ul>
</div>
<div id="card">
<div id="c1">
</div>
<div id="c2">
</div>
<img src="image/vp1cannot.png" id="c3" style="background-image:url(jiang/jdaqiao_1200.jpg)">
<ul>
<li id="c4">
</li>
<li id="c5">
</li>
<li id="c6">
</li>
<li id="c7">
</li>
<li id="c8">
</li>
<li id="c9">4
</li>
</ul>
</div>
<div id="card" style="float:right">
<div id="c1">
</div>
<div id="c2">
</div>
<img src="image/vp1cannot.png" id="c3">
<ul>
<li id="c4">
</li>
<li id="c5">
</li>
<li id="c6">
</li>
<li id="c7">
</li>
<li id="c8">
</li>
<li id="c9">4
</li>
</ul>
</div>
</div>
</div>
<img src="card/kbagua.png" class="k1"/>
<img src="image/vheitao.png" class="k2"/>
<img src="card/knanman.png" class="k3"/>
<img src="image/vhongtao.png" class="k4"/>
<img src="card/kdawan.png" class="k5"/>
<img src="image/vfangkuai.png" class="k6"/>
<img src="card/ktaoyuan.png" class="k7"/>
<img src="image/vmeihua.png" class="k8"/>
<div class="huatuo">
<div class="ht"></div>
<div class="yy"></div>
<ul></ul>
<div class="jn1">急<br />救</div>
<div class="jn2">青<br />囊</div>
<div> class="x1"</div>
<div> class="x2"</div>
</div>
</body>
</html>
