CSS位置決め特性は、三つ、即ち、絶対位置、相対位置、固定位置が存在します。
位置：絶対; <！ - 絶対位置- > 位置：相対; <！ - 位置反対- > 位置：固定; <！ - 固定ポジショニング- >
相対的な位置
相対位置：元の位置にレッツ要素、位置調整（微調整がカセットを位置決めするために使用されてもよいです）。
フォーマット：
位置：相対;
左：は50px;
トップ：は50px;
相対位置例：
<！DOCTYPE HTML > < HTML LANG = "EN" > < 頭> < メタ文字コード= "UTF-8" > < メタ名= "ジェネレータ" コンテンツ= "EditPlus®" > < メタ名= "著者" コンテンツ= "" > < メタ名=「キーワード」コンテンツ=「」> < メタ名=「説明」コンテンツ=「」 タイトル> < スタイルタイプ= "テキスト/ cssの" > ボディ{ マージン：0PX 。 } .div1 { 幅：200pxの。 高さ：200pxの。 国境：1pxの固体赤。 } .div2 { 位置：相対; / * の相対位置：元の位置に対して* / 左：は50px ; / * 横軸：正の値が右にオフセットを示し、負の値は左にオフセットを示す* / トップ：は50px 。/ * 縦：正の値下方にオフセットを示し、負の値は上方にオフセットを示します* / 幅：200pxの。 高さ：200pxの。 国境：1pxの固体赤。 } </ スタイル> </ ヘッド> < 身体> < のdiv クラス= "DIV1" >生涯</ divの> < divのクラス= "DIV2" >辞職</ DIV > </ ボディ> </ HTML >
効果：
相対的な位置決めがオフにマークされていません
相対的な位置：的外れ、ピット家を出る、誰もがその場所のスクイズを取ることができないではありません。
言い換えれば、実際の位置の相対的な位置決めは、家庭まだですが、影の外に、あなたの周り浮くことができます。
相対的な位置決めの目的
あなたは（別のdivの上のdivに入れて）効果を「キャッピング」する場合は、我々は一般的に相対的な位置決めをしません。相対的な位置は、それは2つの目的があります。
- （1）微調整要素
- （2）基準は絶対位置、子必見の相の父とされます
ターゲティング値の相対的な位置関係
-
左：右のボックスには、
-
右：左のボックス
-
トップ：ボックスダウン
-
下：ボックスを移動します
PS：負の数は逆の方向を示しています。
↘：
位置：相対;
左：40ピクセル;
トップ：10pxの;
↙：
位置：相対;
右：100ピクセル;
トップ：100ピクセル;
↖：
位置：相対;
右：100ピクセル;
下：100pxに。
↗：
位置：相対;
左：200pxの。
下：200pxの。
あなたは絵の上方向を記述したい場合は、まず、すべての記述することができます。
位置：相対;
左：200pxの。
トップ：100ピクセル;
絶対位置
绝对定位：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
格式举例如下：
position: absolute; /*绝对定位*/
left: 10px; /*横坐标*/
top/bottom: 20px; /*纵坐标*/
绝对定位脱标
绝对定位的盒子脱离了标准文档流。
所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。
绝对定位的参考点（重要）
（1）如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角：
（2）如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸（好好理解“首屏”二字），对应的页面的左下角：
问题：
答案：
用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。
以盒子为参考点
一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。
如下：（子绝父相）
以下几点需要注意。
（1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：
（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：
子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。
工程应用：
“子绝父相”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：
父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。
（3）绝对定位的儿子，无视参考的那个盒子的padding：
下图中，绿色部分是父亲div的padding，蓝色部分p是div的内容区域。此时，如果div相对定位，p绝对定位，那么， p将无视父亲的padding，在border内侧为参考点，进行定位：
让绝对定位中的盒子在父亲里居中
我们知道，如果想让一个标准流中的盒子在父亲里居中（水平方向看），可以将其设置margin: 0 auto属性。
可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：
div {
width: 600px;
height: 60px;
position: absolute; 绝对定位的盒子
left: 50%; 首先，让左边线居中
top: 0;
margin-left: -300px; 然后，向左移动宽度（600px）的一半
}
我们可以总结成一个公式：
left:50%; margin-left:负的宽度的一半
固定定位
固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
备注：IE6不兼容。
用途1：网页右下角的“返回到顶部”
比如我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位。
<style type="text/css"> .backtop{ position: fixed; bottom: 100px; right: 30px; width: 60px; height: 60px; background-color: gray; text-align: center; line-height:30px; color:white; text-decoration: none; /*去掉超链接的下划线*/ } </style>
**用途2：**顶部导航条
我们经常能看到固定在网页顶端的导航条，可以用固定定位来做。
需要注意的是，假设顶部导航条的高度是60px，那么，为了防止其他的内容被导航条覆盖，我们要给body标签设置60px的padding-top。
顶部导航条的实现如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ /*为什么要写这个？*/ /*不希望我们的页面被nav挡住*/ padding-top: 60px; /*IE6不兼容固定定位，所以这个padding没有什么用，就去掉就行了*/ _padding-top:0; } .nav{ position: fixed; top: 0; left: 0; width: 100%; height: 60px; background-color: #333; z-index: 99999999; } .inner_c{ width: 1000px; height: 60px; margin: 0 auto; } .inner_c ul{ list-style: none; } .inner_c ul li{ float: left; width: 100px; height: 60px; text-align: center; line-height: 60px; } .inner_c ul li a{ display: block; width: 100px; height: 60px; color:white; text-decoration: none; } .inner_c ul li a:hover{ background-color: gold; } p{ font-size: 30px; } .btn{ display: block; width: 120px; height: 30px; background-color: orange; position: relative; top: 2px; left: 1px; } </style> </head> <body> <div class="nav"> <div class="inner_c"> <ul> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> </ul> </div> </div> </body> </html>
5、z-index属性：
z-index属性：表示谁压着谁。数值大的压盖住数值小的。
有如下特性：
（1）属性值大的位于上层，属性值小的位于下层。
（2）z-index值没有单位，就是一个正整数。默认的z-index值是0。
（3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。
（5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。
第五条分析：
z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。也就是层级的应用。
层级：
（1）必须有定位（除去static）
（2）用z-index来控制层级数。