diff --git a/src/js/layer/base.js b/src/js/layer/base.js
index 7b0dac5..824fb1f 100644
--- a/src/js/layer/base.js
+++ b/src/js/layer/base.js
@@ -24,7 +24,6 @@ let defconf = {
   maskClose: false, //遮罩点击关闭弹窗
   radius: '0px', //弹窗圆角半径
   area: ['auto', 'auto'],
-  shift: [null, null], // 出现的地方
   title: '提示', //弹窗主标题(在工具栏上的)
   menubar: true, //是否显示菜单栏
   content: '', // 弹窗的内容
@@ -101,9 +100,8 @@ const _layer = {
     if (typeof title === 'function') {
       opt.yes = title
     } else {
-      title += ''
       if (title) {
-        opt.title = title
+        opt.title = title + ''
       }
       if (cb && typeof cb === 'function') {
         opt.yes = cb
@@ -120,9 +118,8 @@ const _layer = {
         opt.no = yescb
       }
     } else {
-      title += ''
       if (title) {
-        opt.title = title
+        opt.title = title + ''
       }
       if (yescb && typeof yescb === 'function') {
         opt.yes = yescb
@@ -177,8 +174,8 @@ const _layer = {
       fixed: true
     })
   },
-  tips: function(msg, elem, conf) {
-    if (!(elem instanceof HTMLElement)) {
+  tips: function(content, container, conf) {
+    if (!(container instanceof HTMLElement)) {
       return Anot.error('tips类型必须指定一个目标容器')
     }
     if (typeof conf !== 'object') {
@@ -197,8 +194,8 @@ const _layer = {
     if (!conf.color) {
       conf.color = '#fff'
     }
-    conf.$elem = elem
-    conf.content = msg
+    conf.container = container
+    conf.content = content
     conf.type = 5
     conf.icon = 0
     conf.fixed = true
@@ -289,7 +286,7 @@ __layer__.prototype = {
         ...conf.state
       },
       props: conf.props,
-      skip: ['area', 'shift', 'skin', 'mask', 'maskClose'],
+      skip: ['area', 'shift', 'skin', 'mask', 'maskClose', 'container'],
       methods: {
         onMaskClick: function() {
           if (this.type < 4 && !this.maskClose) {
@@ -371,7 +368,7 @@ __layer__.prototype = {
     layBox.setAttribute(':click', 'cancelBubble')
 
     //暂时隐藏,避免修正定位时,能看到闪一下
-    layBox.style.cssText =
+    layBox.style.cssText +=
       'visibility:hidden; border-radius:' + state.radius + 'px'
 
     //没有菜单栏, 且未禁止拖拽,则加上可拖拽属性
@@ -380,7 +377,7 @@ __layer__.prototype = {
       layBox.setAttribute('data-limit', 'window')
     }
 
-    //弹窗的宽高
+    // size of layer-content
     var boxcss = ''
     if (state.area[0] !== 'auto') {
       boxcss += 'width: ' + state.area[0] + ';'
@@ -495,35 +492,27 @@ __layer__.prototype = {
     layerDom[$id] = this.create()
 
     delete state.specialMode
-    // if (layerDom[this.init.$id][0]) {
-    //   document.body.appendChild(layerDom[this.init.$id][0])
-    //   //仅在允许点击遮罩时,初始化控制器,减少资源消耗
-    //   if (this.init.shadeClose) {
-    //     Anot(this.cInit)
-    //     // Anot.scan(layerDom[this.init.$id][0])
-    //   }
-    // }
 
     document.body.appendChild(layerDom[$id][0])
     this.vm = Anot(this.init)
-    // Anot.scan(layerDom[this.init.$id][1])
     return this
   },
   show: function() {
-    let { state, $id } = this.init
-    var _this = this
+    let { state, $id, container } = this.init
 
     setTimeout(function() {
       var style = { visibility: '', background: state.background }
       let css = getComputedStyle(layerDom[$id][1])
 
+      // tips类型, 弹层的定位要在指定的容器上
       if (state.type === 5) {
+        // only type[tips] can define `color`
         style.color = state.color
 
-        let $elem = Anot(_this.init.$elem)
-        let ew = $elem.innerWidth()
-        let ol = $elem.offset().left - document.body.scrollLeft
-        let ot = $elem.offset().top - document.body.scrollTop
+        let $container = Anot(container)
+        let ew = $container.innerWidth()
+        let ol = $container.offset().left - document.body.scrollLeft
+        let ot = $container.offset().top - document.body.scrollTop
 
         style.left = ol + ew * 0.7
         style.top = ot - parseInt(css.height) - 8
@@ -551,7 +540,7 @@ __layer__.prototype = {
         }
       }
 
-      Anot(layerDom[_this.init.$id][1]).css(style)
+      Anot(layerDom[$id][1]).css(style)
     }, 4)
 
     // loading类型,回调需要自动触发
diff --git a/src/js/layer/skin/def.scss b/src/js/layer/skin/def.scss
index e2d705b..fa38230 100644
--- a/src/js/layer/skin/def.scss
+++ b/src/js/layer/skin/def.scss
@@ -11,54 +11,63 @@
 
 .do-layer {width:auto;height:auto;
 
-  &.mask {position:fixed;z-index:65534;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.3);}
+    
+  .layer-box {position:absolute;}
+
+  &.mask {position:fixed;z-index:65534;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.3);
+
+    .layer-box {position:absolute;}
+  }
+
 
   a {text-decoration:none;}
 
-  .layer-box {position:absolute;left:50%;top:50%;z-index:65535;
+  .layer-box {left:50%;top:50%;z-index:65535;
+
+    &.shift {transition: all .3s ease-in-out;}
 
     &.scale {transform:scale(1.02);transition:transform .1s linear;}
 
     /* 默认皮肤 */
     &.skin-def {padding:15px 10px;border-radius:3px;color:#666;font-size:14px;box-shadow:0 5px 20px rgba(0,0,0,.3);
         
-        .icon-0::before {content:"\e674";color:nth($cr, 1);} // question
-        .icon-1::before {content:"\e610";color:nth($ct, 1);} // get
-        .icon-2::before {content:"\e6f8";color:nth($cb, 1);} // happy
-        .icon-3::before {content:"\e6fd";color:nth($co, 1);} // sad
-        .icon-4::before {content:"\e6f6";color:nth($co, 1);} // warn
-        .icon-5::before {content:"\e673";color:nth($ct, 1);} // face
-        .icon-6::before {content:"\e636";color:nth($cgr, 1);} // time
-        .icon-7::before {content:"\e623";color:nth($co, 1);} // star
-        .icon-8::before {content:"\e604";color:nth($cr, 1);} // mute
-        .icon-9::before {content:"\e605";color:nth($ct, 1);} // unmute   
+      .icon-0::before {content:"\e674";color:nth($cr, 1);} // question
+      .icon-1::before {content:"\e610";color:nth($ct, 1);} // get
+      .icon-2::before {content:"\e6f8";color:nth($cb, 1);} // happy
+      .icon-3::before {content:"\e6fd";color:nth($co, 1);} // sad
+      .icon-4::before {content:"\e6f6";color:nth($co, 1);} // warn
+      .icon-5::before {content:"\e673";color:nth($ct, 1);} // face
+      .icon-6::before {content:"\e636";color:nth($cgr, 1);} // time
+      .icon-7::before {content:"\e623";color:nth($co, 1);} // star
+      .icon-8::before {content:"\e604";color:nth($cr, 1);} // mute
+      .icon-9::before {content:"\e605";color:nth($ct, 1);} // unmute   
 
 
-        /* 弹层标题栏 */
-        .layer-title {width:100%;height:43px;padding:0 10px;line-height:43px;font-size:16px;color:nth($cgr, 1);}
+      /* 弹层标题栏 */
+      .layer-title {width:100%;height:43px;padding:0 10px;line-height:43px;font-size:16px;color:nth($cgr, 1);}
 
-        /* 弹层主体内容 */
-        .layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px;
+      /* 弹层主体内容 */
+      .layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px;
 
-            .msg-icon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center;}
-            .detail {width:auto;height:100%;margin:auto auto auto 50px;padding:5px 15px;word-break:break-all;word-wrap: break-word;
+          .msg-icon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center;}
+          .detail {width:auto;height:100%;margin:auto auto auto 50px;padding:5px 15px;word-break:break-all;word-wrap: break-word;
 
-                .prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;
+              .prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;
 
-                    &.alert {border-color:nth($cr, 1)}
-                    &:focus {border-color:nth($ct, 1)}
-                }
-                .msg-box {line-height:30px;}
-            }
+                  &.alert {border-color:nth($cr, 1)}
+                  &:focus {border-color:nth($ct, 1)}
+              }
+              .msg-box {line-height:30px;}
+          }
 
-            &.none-icon .detail {margin:0 auto;}
-        }
+          &.none-icon .detail {margin:0 auto;}
+      }
 
 
-        /* 弹层按钮部分 */
-        .layer-ctrl {width:100%;height:40px;padding:5px 0;line-height:30px;font-size:14px;color:#454545;text-align:right;
+      /* 弹层按钮部分 */
+      .layer-ctrl {width:100%;height:40px;padding:5px 0;line-height:30px;font-size:14px;color:#454545;text-align:right;
 
-          a {overflow:hidden;position:relative;display:inline-block;width:auto;min-width:60px;height:30px;margin-left:5px;padding:0 10px;color:nth($ct, 1);text-align:center;
+        a {overflow:hidden;position:relative;display:inline-block;width:auto;min-width:60px;height:30px;margin-left:5px;padding:0 10px;color:nth($ct, 1);text-align:center;
 
           &::before {position:absolute;left:-50%;top:-50%;z-index:-1;display:block;width:200%;height:200%;border-radius:50%;background:nth($cp, 2); content:"";opacity:0;transform: scale(0, .0); transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);}
             
@@ -94,100 +103,89 @@
     /* 特殊类弹层(msg弹层) */
     &.type-unspecial {min-width:10px;background:transparent;
 
-        .layer-content {min-height:60px;padding:0}
-        .layer-content .detail {margin:0;padding:0}
+      .layer-content {min-height:60px;padding:0}
+      .layer-content .detail {margin:0;padding:0}
     }
 
     
     /* 内置几种loading动画 */
     .loading-box {position:relative;width:100px;height:100px;margin:auto;
 
-        .dot-box {position:absolute;display:block;}
-        
-        /* 常规的转动 */
-        &.style-1,&.style-2 {
+      .dot-box {position:absolute;display:block;}
+      
+      /* 常规的转动 */
+      &.style-1,&.style-2 {
 
-            .dot-box {width:70%;height:70%;margin:15%;-webkit-animation: circle 1.3s infinite linear;-moz-animation: circle 1.3s infinite linear;animation: circle 1.3s infinite linear;
+        .dot-box {width:70%;height:70%;margin:15%;-webkit-animation: circle 1.3s infinite linear;-moz-animation: circle 1.3s infinite linear;animation: circle 1.3s infinite linear;
 
-                &::after {content:"\e648";font:70px/1 "ui font";}
-            }
+          &::after {content:"\e648";font:70px/1 "ui font";}
         }
+      }
 
-        &.style-2 {
-            .dot-box::after {content:"\e64a";}
+      &.style-2 {
+        .dot-box::after {content:"\e64a";}
+      }
+      
+      /* 频谱波动 */
+      &.style-3 {height:50px;
+
+        .dot-box{width:100%;height:100%;
+            
+          i {float:left;display:block;width:10px;height:100%;margin:0 5px;background:nth($ct, 3);animation: bounce 1s infinite ease-in-out;transform:scaleY(.6);
+
+            &:nth-child(2) {animation-delay:.1s;}
+            &:nth-child(3) {animation-delay:.2s;}
+            &:nth-child(4) {animation-delay:.3s;}
+            &:nth-child(5) {animation-delay:.4s;}
+          }
         }
-        
-        /* 频谱波动 */
-        &.style-3 {height:50px;
+      }
 
-            .dot-box{width:100%;height:100%;
-                
-                i {float:left;display:block;width:10px;height:100%;margin:0 5px;background:nth($ct, 3);-webkit-animation: bounce 1s infinite ease-in-out;-moz-animation: bounce 1s infinite ease-in-out;animation: bounce 1s infinite ease-in-out;-webkit-transform:scaleY(.6);-moz-transform:scaleY(.6);transform:scaleY(.6);
+      /* 缓动圆圈 */
+      &.style-4 {
 
-                    &:nth-child(2) {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s;}
-                    &:nth-child(3) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}
-                    &:nth-child(4) {-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s;}
-                    &:nth-child(5) {-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s;}
-                }
-            }
+        .dot-box{width:60%;height:60%;margin:20%;
+          
+          i {position:absolute;display:block;width:60px;height:60px;animation: circle2 2s infinite ease-in-out;transform: rotate(45deg);
+                  
+            &::before {display:block;width:8px;height:8px;background:nth($ct, 3);border-radius:50%;content:""}
+
+            &:nth-child(2) {animation-delay:.1s;}
+            &:nth-child(3) {animation-delay:.2s;}
+            &:nth-child(4) {animation-delay:.3s;}
+            &:nth-child(5) {animation-delay:.4s;}
+          }
         }
+      }
 
-        /* 缓动圆圈 */
-        &.style-4 {
+      /* 矩阵 */
+      &.style-5 {
 
-            .dot-box{width:60%;height:60%;margin:20%;
-                
-                i {position:absolute;display:block;width:60px;height:60px;-webkit-animation: circle2 2s infinite ease-in-out;-moz-animation: circle2 2s infinite ease-in-out;animation: circle2 2s infinite ease-in-out;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
-                        
-                    &::before {display:block;width:8px;height:8px;background:nth($ct, 3);border-radius:50%;content:""}
+        .dot-box{width:90%;height:90%;margin:5%;
+            
+          i {float:left;display:block;width:30px;height:30px;background:nth($ct, 3);animation: grid 1.5s infinite linear;
+                  
+            &:nth-child(4),
+            &:nth-child(8) {animation-delay:.2s;}
+            &:nth-child(1),
+            &:nth-child(5),
+            &:nth-child(9) {animation-delay:.3s;}
 
-                    &:nth-child(2) {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s;}
-                    &:nth-child(3) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}
-                    &:nth-child(4) {-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s;}
-                    &:nth-child(5) {-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s;}
-                }
-            }
+            &:nth-child(2),
+            &:nth-child(6) {animation-delay:.4s;}
+
+            &:nth-child(3) {animation-delay:.5s;}
+          }
         }
-
-        /* 矩阵 */
-        &.style-5 {
-
-            .dot-box{width:90%;height:90%;margin:5%;
-                
-                i {float:left;display:block;width:30px;height:30px;background:nth($ct, 3);-webkit-animation: grid 1.5s infinite linear;-moz-animation: grid 1.5s infinite linear;animation: grid 1.5s infinite linear;
-                        
-                    &:nth-child(4),
-                    &:nth-child(8) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}
-                    &:nth-child(1),
-                    &:nth-child(5),
-                    &:nth-child(9) {-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s;}
-
-                    &:nth-child(2),
-                    &:nth-child(6) {-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s;}
-
-                    &:nth-child(3) {-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s;}
-                }
-            }
-        }
-        
-
+      }
 
     }
 
-    &:active {z-index:65536;}
-
-
-
   }
-
-  
-
+  &:active {z-index:65536;}
 }
 
-.do-layer-cover {
 
-    &.type-6 {background:rgba(0,0,0,.3);}
-}
 
 
 @-webkit-keyframes circle {