1 定位父对象底边<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>bottom</title><meta name="author" content="" /><meta name="copyright" content="" /><!--描述：检索或设置对象与其最近一个定位的父对象底边相关的位置。
必须定义position属性值为absolute、relative或fixed，此取值方可生效。
语法：bottom: <length> | <percentage> | auto默认值：auto取值：auto：无特殊定位，根据HTML定位规则在文档流中分配<length>：用长度值来定义距离底部的偏移量。
可以为负值。
<percentage>：用百分比来定义距离底部的偏移量。
可以为负值。
说明：--><style>body{background-color: deepskyblue;}.test{position:absolute;bottom:100px;width:200px;height:200px;padding:5px10px;background:#c00;color:#fff;line-height:12;}</style></head><body><div class="test">我将出现在浏览器底部</div></body></html>2 父对象左边<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>left</title><meta name="author" content="" /><meta name="copyright" content="" /><!--描述：检索或设置对象与其最近一个定位的父对象左边相关的位置。
必须定义position属性值为absolute、relative语法：left: <length> | <percentage> | auto默认值：auto取值：auto：无特殊定位，根据HTML定位规则在文档流中分配<length>：用长度值来定义距离左边的偏移量。
可以为负值。
<percentage>：用百分比来定义距离左边的偏移量。
可以为负值。
说明：--><style>body{background-color: deepskyblue;}.test{position:absolute;left:100px;width:200px;height:200px;padding:5px10px;background:#c00;color:#fff;line-height:12;}</style></head><body><div class="test">我将出现在浏览器左上角</div></body></html>3 检索对象定位方式<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>position</title><meta name="author" content="" /><meta name="copyright" content="" /><!--描述：检索对象的定位方式。
语法：position：static | relative | absolute | fixed 默认值：static取值：static：无特殊定位，对象遵循正常文档流。
top，right，bottom，left等属性不会被应用。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
top,left:对象距离正常位置的偏移量；absolute：对象脱离正常文档流，使用top，right，bottom，left等属性以父容器进行绝对定位。
而其层叠通过z-index属性定义。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
IE6及以下不支持此参数值说明：--><style>body{background-color: deepskyblue;}#staticPosition{position:static;top:80%;left:80%;width:200px;height:100px;background-color: black;color: white;line-height:2;}/*绝对定位*/#absolutePosition{position:absolute;top:600px;left:700px;width:200px;height:100px;background: red;line-height:2.4;}/*相对定位*/#relativePosition{position:relative;top:100px;left:100px;width:200px;height:100px;background: green;color: white;line-height:2.4;}#fixedPosition{position:fixed;top:400px;left:400px;width:200px;height:100px;background: blue;color: white;line-height:2.4;}</style></head><body><!--描述：绝对定位的父容器是根据离它最近的包含它的元素决定的。
--><div id="absolutePosition">水平垂直居中的对象,绝对定位absolute；</div><div id="staticPosition">静态定位static；</div><!—描述：根据自己的起始位置为参考点进行定位；--><div id="relativePosition">相对定位relative；</div><!--描述：固定定位的父对象永远是浏览器；忽略包含它的任何元素； --><div id="fixedPosition">固定定位fixed；</div> </body></html>4 定位父对象右边<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>right</title><meta name="author" content="" /><meta name="copyright" content="" /><!--时间：2016-06-30描述：检索或设置对象与其最近一个定位的父对象右边相关的位置。
必须定义position属性值为absolute、relative或fixed，此取值方可生效。
语法：right：<length> | <percentage> | auto默认值：auto取值：auto：无特殊定位，根据HTML定位规则在文档流中分配<length>：用长度值来定义距离右边的偏移量。
可以为负值。
<percentage>：用百分比来定义距离右边的偏移量。
可以为负值。
说明：--><style>body{background-color: deepskyblue;}.test{position:absolute;right:100px;width:200px;height:200px;padding:5px10px;background:#c00;color:#fff;line-height:12;}</style></head><body><div class="test">我将出现在浏览器右上角</div></body></html>5定位父对象顶部<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>top</title><meta name="author" content="" /><meta name="copyright" content="" /><!--描述：检索或设置对象与其最近一个定位的父对象顶部相关的位置。