要想操纵好层的肯定精准定位，要是了解CSS中有关精准定位（position）的界定，1切就会变得轻轻松松简易。
应用CSS来精准定位网页页面里层的部位，1直是较为无法把握的事儿，许多情况下，常常被肯定精准定位的元素，一直以访问器的左上角为座标原点，此时，假如访问器的尺寸更改，被界定的层就会偏移设计方案要想的部位，令人很挠头。
实际上，要想操纵好层的肯定精准定位，要是了解CSS中有关精准定位（position）的界定，1切就会变得轻轻松松简易。
CSS中有关精准定位（position）是这样界定的：
精准定位（position）容许客户精准界定元素框出現的相对性部位，能够相对它一般出現的部位，相对其上级元素，相对另外一个元素，或相对访问器视窗自身。每一个显示信息元素都可以以用精准定位的方式来叙述，而其部位由此元素的包括块来决策的。
包括块（containing block）是文件格式编排产生的关系情景，比如，1个加粗的元素的包括块能够是该元素所出現的段落，如图1所示。
在了解精准定位以前，最先，要先了解HTML文档的构造，比如有1个html文档內容以下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文本文档构造</title>
</head>
<body>
<h1>CSS标准</h1>
<p>款式表由1些<strong>款式标准</strong>构成。</p>
<ul>
<li>挑选符
<ul>
<li>类挑选符</li>
<li>ID挑选符</li>
<li><em>包括</em>挑选符</li>
</ul>
</li>
<li>特性</li>
<li>值</li>
</ul>
</ul>
</body>
</html>
此文本文档对应的树型构造，如图2所示。
CSS绝大多数工作能力是根据元素的“父子”关联，在图2的大家族树中，每一个元素全是另外一个元素的“父”或“子”或2者全是。比如：body既是html的子元素，又是h1的父元素，而html便是h1的先祖，h1则是html的子孙后代。
Body是全部访问器能显示信息的元素的先祖，而html是全部元素的先祖，也称为“根元素”。
那为何精准定位了的元素还一直以访问器对话框的左上角为座标呢？由于其实不是每一个元素都能为其晚辈元素转化成1个包括块。
创建包括块的标准以下：
根元素”的包括块（也叫原始包括块）由客户代理商转化成，在HTML中，根元素是HTML元素，虽然有的访问器会有误地应用body元素。
针对那些未肯定精准定位的非根元向来说，元素的包括块设定为近期的块级先祖元素的內容区边缘。
对那些应用肯定（absolute）做为精准定位（postition）的非根元素，包括块设为近期的精准定位（postition）并不是静止不动（static）的先祖元素（任何种类）。有下列几种状况：
a. 假如先祖元素是块级（block）元素，包括块设为先祖元素的填充（padding）边缘，也便是被边框（border）管束的地区
b. 假如先祖元素是内联（inline）元素，包括块设为先祖元素的內容边缘。因而，肯定精准定位的元素常常以访问器可视性地区的左上为座标原点来开展精准定位了。
在CSS中但是应用position特性来在不一样的精准定位种类选中择。
英语的语法：
position : static | absolute | fixed | relative | inherit
其各主要参数含意是：
static : 静态数据（默认设置），无独特精准定位。
relative : 相对性，目标不能堆叠，但将根据left，right，top，bottom等特性在一切正常文本文档流中偏位部位
absolute : 肯定，将目标从文本文档流中拖出，根据width、height、left，right，top，bottom等特性与margin、padding、border开展肯定精准定位，肯定精准定位的元素能够有界限，但这些界限不缩小。而其堆叠根据z-index特性界定。
fixed : 飘浮，使元素固定不动在显示屏的某个部位，其包括块是可视性地区自身，因而它不随翻转条的翻转而翻转。（IE5.5 不适用此特性。）
inherit : 这个值从其上级元素承继获得。
示例：
div {
position: absolute;
bottom: 1in;
left: 1in;
right: 1in;
top: 1in;
}
div {
position:relative;
top:⑶px;
left:6px;
}
既然掌握了包括块的定义，那末针对相对性精准定位和肯定精准定位的关联，就很好把握了。
比如，如今必须把网页页面內容总体垂直居中，随后再将在其中一些层肯定精准定位的话，那就要把最外面的层设定精准定位特性。
<body>
<div id="box">
<div id="nav">
<p>每一个显示信息元素都可以以用精准定位的方式来叙述，而其部位由此元素的<strong>包括块</strong>来决策的。</p>
</div>
</div>
</body>
此时，假如你要对nav肯定精准定位，则需设定css：
body {
margin:0;
padding:0;
text-align:center;
}
#box{
background:#ff0;
position:relative; /* 使box层变成其子孙后代元素的包括块 */
width:500px;
height:200px;
margin:0 auto;
}
#nav {
background:#ccc;
position:absolute; /* nav层将在box层的边框范畴内肯定精准定位 */
top:20px;
left:40px;
width:200px;
}
其显示信息实际效果如图3所示。
因而，把握了包括块的定义，精准定位就变得不那末艰难了。