定位问题一直是新手学习css的一个难点，现在我将他们总结出来，希望对大家有帮助
在css中，通过position属性，配合top,right,left,buttom对元素进行定位
position属性有：static，relative，absolute，fixed四种，下面分别探讨
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> .container { width: 400px; height: 400px; background-color: #DDDDDD; } .container div { border: 1px solid #F5F5F5; width: 100px; height: 100px; background-color: #06A7E1; } </style> <body> <div class="container"> <div class="x1">一</div> <div class="x2">二</div> <div class="x3">三</div> </div> </body></html>效果：
盒子一行一个，自动换行
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> .container { width: 400px; height: 400px; background-color: #DDDDDD; } .container div { border: 1px solid #F5F5F5; width: 100px; height: 100px; background-color: #06A7E1; } .x1{ position: relative; top: 5px; left: 5px; } </style> <body> <div class="container"> <div class="x1">一</div> <div class="x2">二</div> <div class="x3">三</div> </div> </body></html>元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> .container { width: 400px; height: 400px; background-color: #DDDDDD; position: relative; } .container div { border: 1px solid #F5F5F5; width: 100px; height: 100px; background-color: #06A7E1; } .x1{ position: absolute; top: 50px; left: 50px; } </style> <body> <div class="container"> <div class="x1">一</div> <div class="x2">二</div> <div class="x3">三</div> </div> </body></html>元素脱离原来的位置，释放来的空间，相当于被独立出来了，此时，它所相对的位置是它position为relative的父级元素，如果没有，则相对于body定位
元素框的表现类似于将 position 设置为 absolute，不过它的位置始终相对于窗口，可以实现固定导航栏的效果
