使元素固定在页面：
div{ position:fixed; top:0; left:0; }
例如做页面导航时，可以固定导航在页面顶端，使之不会随着页面的下滑而看不见。
相对定位：
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
绝对定位：
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常的文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来的它在正常流中生成何种类型的框。
单个圆圈闪烁：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #spinner { width: 100px; height: 100px; margin: 100px auto; background-color:red; border-radius: 100%; -webkit-animation: scaleout 1.0s infinite ease-in-out; animation: scaleout 1.0s infinite ease-in-out; } @-moz-keyframes scaleout { 0% { -moz-transform: scale(0.0) } 100% { -moz-transform: scale(1.1); opacity: 0; } } @keyframes scaleout { 0% { transform: scale(0.0); -moz-transform: scale(0.0); } 100% { transform: scale(1.0); -moz-transform: scale(1.0); opacity: 0; } } </style> </head> <body> <div id="spinner"></div> </body> </html>
两个圆圈交替闪烁：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { margin: 200px auto; width: 100px; height: 100px; border-radius: 100%; background-color: dodgerblue; position: fixed; } #a1{ animation: onea 2s infinite ease-in; -moz-animation: onea 2s infinite ease-in; opacity: 0.6; } @keyframes onea { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } @-moz-keyframes onea { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } #a2{ animation: twoa 2s infinite ease-in; animation-delay: -1s; opacity: 0.6; } @keyframes twoa { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } </style> </head> <body> <div id="a1"></div> <div id="a2"></div> </body> </html>
原文：http://www.cnblogs.com/Jaelynkong/p/4908365.html