由元素在HTML中的位置决定。
静态定位：文档中默认都是静态定位
相对定位：
利用相对定位的盒子的位置常以标准流的排版办法为根本, 然后使盒子相对付它在原来的标准位置偏移指定的间隔。
相对定位的盒子仍在标准流中, 它后面的盒子仍以标准流办法对待它。
利用relative, 即相对定位, 除了将position属性设置为relative之外, 还须要指定一定的偏移量，
水平方向通过left或者right属性来指定, 垂直方向通过top和bottom来指定。
利用相对定位的盒子，会相对付它原来的位置，通过偏移指定的间隔，到达新的位置。而该相对定位的盒子则仍旧位于标准流中，它对父块没有任何影响。
利用相对定位的盒子不仅对父块没有任何影响，对兄弟盒子也没有任何影响。
大略理解：
它是相对付"原来的自己"进行定位, 相对定位元素它还占用空间, 它的层次会比普通元素要高
相对定位属性它一样平常都是用于合营绝对定位来利用
相对定位有坑, 以是一样平常不用于做"压盖"效果。页面中, 效果极小。就两个浸染：
1) 微调元素
2) 做绝对定位的参考，子绝父相(合营绝对定位一起利用)
干系属性
可以用left、right来描述盒子右、左的移动；
可以用top、bottom来描述盒子的下、上的移动。
绝对定位：
用绝对定位的盒子以它的"最近"的一个"已经定位"的"先人元素"为基准进行偏移。如果没有已经定位的先人元素，那么会以浏览器窗口为基准进行定位。
再有，绝对定位的框从标准流中分开，这意味着它们对其后的兄弟盒子的定位没有任何影响，其他的盒子就彷佛这个盒子不存在一样。
大略理解:
绝对定位元素它是相对付"先人"定位元素(relative、fixed、absolute)，如果绝对定位元素它的先人没有定位元素(static)那么它会以当前的浏览器窗口来进行定位,
绝对定位元素不再占用空间
固定定位：
当position的属性值为fixed，即固定定位。它与绝对定位有些类似,差异紧张在于定位的基准不是先人，而是浏览器窗口或其它显示设备窗口。
也便是当访问者拖动浏览器的窗口滚动条时，固定定位的元素相对付浏览器窗口的位置保持不变。(IE6不支持固定定位)
大略理解：它因此浏览器窗口作为参照标准来进行定位, 固定定位元素它不再占用空间
定位问题：
绝对定位问题：
当我们给一个子元素设置绝对定位,让它在父元素的右下角显示，这个时候
如果父元素的宽和高都为奇数,那么在IE6下我们没有方法让这个子元素压住边框的
这个时候我们建议大家不要利用奇数作为长度
相对定位问题；
IE6下,它认为我们的父元素一定包住它里面的子元素,以是当子元素的宽度和高度大于父元素时,在IE下父元素就会被撑开,
这个时候我们想办理这个问题,我们可以给父元素设置overflow:hidden,但是此时IE6还是不起浸染,
以是我们办理方法便是给子元素和父元素都设置相对定位
固定定位的问题：
当我们给一个固定定位的子元素(子元素position:fixed)的父元素添加相对定位或者绝对定位的时候,
它是不会随着父元素移动的,仍旧是相对屏幕的。
实例:导航条
<!DOCTYPE HTML><html><head><meta http-equiv="content-type" content="text/html" /><title>导航条</title><style type="text/css">{ margin:0px; padding:0px;}ul,li{ list-style:none;}.box{ width:800px; height:30px; margin:100px auto;}li{ float:left; width:180px; text-align: center; line-height:28px; border:1px solid red; margin-left:-1px;}li:hover{ border:1px solid green; position:relative; / 办理边框被压住问题 阐明:后面的li压住前面一个li,利用相对定位后,提高了li显示高度 /}</style></head><body><div class="box"><ul><li>HTML+CSS</li><li>javascript</li><li>jquery</li><li>php</li></ul></div></body></html>
让层水平居中的方法：
让旁边边界自动判断之下，即可达成旁边位置呈现居中的目的。
#content { width: 980px; margin-right: auto; margin-left: auto; position: relative;}<div id="content">层内容</div>
若内容区<div>之内还有其他内容<div>,其CSS属性设置就须要加上"定位"position:absolute(或relative),以防firefox等其他浏览器涌现缺点
<div id="container"><div id="content"></div></div>#container { background-image: url(images/3-2-1-bg.jpg); height: 400px; width: 800px; position: relative; background-repeat: no-repeat; margin-right: auto; margin-left: auto;}#content { margin: 75px; height: 210px; width: 610px; padding: 20px; border: 1px solid #FFF; position: absolute;}
让层垂直居中的方法：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>3-4-1</title><style type="text/css">#content { background-color: #6CF; height: 400px; width: 600px; margin-right: auto; margin-left: auto; text-align: center;}html,body { margin: 0px; padding: 0px; height: 100%;}#floater { height: 50%; width: 10px; margin-bottom: -200px; / 为内容区高度的一半/ position: relative;}</style></head><body><div id="floater"></div><div id="content"><p> </p><p> </p><p> </p><p> </p><p>[ 版面内容 ]</p></div></body></html>
