标签：charset 调整 关系 页面布局 标准 定位 css har tom
对于网页页面布局来说，使用定位可以简单粗暴地将各块区域布置好，并且实现多种特效。
绝对定位：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box0{ width: 200px; height: 200px; position: relative;background: #cfa } .box0-1,.box0-2{ width: 50px; height: 50px; } .box0-1{ position:absolute; left: 50px; top: 50px; background: #567 } .box0-2{ position:absolute; left: 50px; top: 50px; background: #5a2} </style> </head> <body> <div class="box0"> <div class="box0-1">0-1</div> <div class="box0-2">0-2</div> </div> </body> </html>
结果如下：
需要注意的是，使用绝对定位调整元素在父级元素区域位置时，父级元素必须为非静态定位，否则子元素会往上级找到非静态的祖先元素，再依据其位置进行定位。
如果不适用定位，要实现这样的效果，需要使用CSS属性为：
.box0{ width: 200px; height: 200px;background: #cfa; overflow: hidden } .box0-1,.box0-2{ width: 50px; height: 50px; } .box0-1{ margin: 50px 0 0 50px; } .box0-2{ margin: 0 50px 0 100px; }
使用边距和浮动是一个计算的过程，需要把握好每一个像素之间的关系。而使用绝对定位就是单纯的找位置，只要量得住，那就找的准，直接粗暴。需要注意的是，绝对定位的元素脱离了标准文档流，其本身的位置并不会保留，所以不能和浮动同时使用。并且也不建议和margin一起使用。
对于相对定位来说，由于元素本身的位置并不会消失，所以配合浮动更加好用，否则使用绝对定位更方便。
如下（便于观察，两个小块设置100的上外边距，此时原本位置应从下方3/4开始）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ width: 200px; height: 200px; background: #abc } .box1-1,.box1-2{ width: 50px; height: 50px; margin-top: 100px; float: left; position: relative; } .box1-1{ top: 50px; left: 50px; background: #a2c; } .box1-2{ bottom: 50px; right: 50px; background: #22c; } </style> </head> <body> <div class="box1"> <div class="box1-1">1-1</div> <div class="box1-2">1-2</div> </div> </body> </html>
结果如下：
相对定位的相对，就是指没有设置定位值，元素所在的位置，根据代码顺序，后者会对前者内容进行覆盖。
绝对定位就是牛皮藓，固定在显示区域的位置，此时固定是针对显示区域而言，对于绝对定位，也不能和浮动使用，同样不建议与margin使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box2{ width: 200px; height: 200px; background: #ca9 } .box2-1{ width: 50px; height: 50px; position: fixed; } .box2-1{ top: 50px; left: 50px; background: #4b3; } </style> </head> <body> <div class="box2"> <div class="box2-1">我被固定了</div> </div> </body> </html>
结果自己找吧：
结果不是根据父级元素定位的，显示不出（和上一篇的旋转一样）暂时不知道为什么。
总之，不同的定位方式有不同的作用，使用定位的目的是让代码简洁直观，所以具体使用哪一种应当根据实际情况而定。
标签：charset 调整 关系 页面布局 标准 定位 css har tom
原文地址：http://www.cnblogs.com/zzmiaow/p/7675137.html
