diff --git a/components/notification/demo/onclose.md b/components/notification/demo/onclose.md
index bb68c6f2b9..386070fbbd 100644
--- a/components/notification/demo/onclose.md
+++ b/components/notification/demo/onclose.md
@@ -1,6 +1,6 @@
 # 回调函数
 
-- order: 2
+- order: 3
 
 点击关闭按钮时触发回调函数。
 
diff --git a/components/notification/demo/top.md b/components/notification/demo/top.md
new file mode 100644
index 0000000000..4a1d496015
--- /dev/null
+++ b/components/notification/demo/top.md
@@ -0,0 +1,24 @@
+# 距离顶部距离
+
+- order: 1
+
+自定义通知框距离顶部的距离， **只在初始化时设置有效** ，默认距离顶部`24px`。
+
+---
+
+````jsx
+var notification = require('antd/lib/notification');
+
+var openNotification = function() {
+  var args = {
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案",
+    top: 100
+  };
+  notification.open(args);
+};
+
+React.render(
+  <button className='ant-btn ant-btn-primary' onClick={openNotification}>距离顶部100px</button>
+, document.getElementById('components-notification-demo-top'));
+````
\ No newline at end of file
diff --git a/components/notification/demo/with-btn-onclose.md b/components/notification/demo/with-btn-onclose.md
index 22db171c64..7511ef92ba 100644
--- a/components/notification/demo/with-btn-onclose.md
+++ b/components/notification/demo/with-btn-onclose.md
@@ -1,6 +1,6 @@
 # 自定义关闭按钮同时触发回调函数
 
-- order: 4
+- order: 5
 
 关闭自定义的关闭按钮时触发回调函数，同时还可以在默认关闭按钮上添加另一个回调函数。
 
diff --git a/components/notification/demo/with-btn.md b/components/notification/demo/with-btn.md
index b0f6935c34..88fdc5e1b0 100644
--- a/components/notification/demo/with-btn.md
+++ b/components/notification/demo/with-btn.md
@@ -1,6 +1,6 @@
 # 自定义关闭按钮
 
-- order: 3
+- order: 4
 
 自定义关闭按钮的样式和文字。
 
diff --git a/components/notification/demo/with-icon.md b/components/notification/demo/with-icon.md
index 151f8cb385..227bd4ef76 100644
--- a/components/notification/demo/with-icon.md
+++ b/components/notification/demo/with-icon.md
@@ -1,6 +1,6 @@
 # 带有Icon的通知提醒框
 
-- order: 1
+- order: 2
 
 通知提醒框左侧有Icon图标。
 
@@ -9,16 +9,47 @@
 ````jsx
 var notification = require('antd/lib/notification');
 
-var openNotification = function() {
+var openNotificationSuccess = function() {
   var args = {
     message: "这是标题",
     description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
-    icon: true
+    icon: "success"
   }; 
   notification.open(args);
 };
 
-React.render(
-  <button className="ant-btn ant-btn-primary" onClick={openNotification}>带有Icon的通知提醒框</button>
+var openNotificationInfo = function() {
+  var args = {
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+    icon: "info"
+  }; 
+  notification.open(args);
+};
+
+var openNotificationWarn = function() {
+  var args = {
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+    icon: "warn"
+  }; 
+  notification.open(args);
+};
+
+var openNotificationError = function() {
+  var args = {
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+    icon: "error"
+  }; 
+  notification.open(args);
+};
+
+React.render(<div>
+  <button className="ant-btn ant-btn-primary" onClick={openNotificationSuccess}>Success</button>
+  <button className="ant-btn ant-btn-primary" onClick={openNotificationInfo}>Info</button>
+  <button className="ant-btn ant-btn-primary" onClick={openNotificationWarn}>Warn</button>
+  <button className="ant-btn ant-btn-primary" onClick={openNotificationError}>Error</button>
+  </div>
 , document.getElementById('components-notification-demo-with-icon'));
 ````
\ No newline at end of file
diff --git a/components/notification/index.jsx b/components/notification/index.jsx
index 71c35b0672..088ad3a777 100644
--- a/components/notification/index.jsx
+++ b/components/notification/index.jsx
@@ -1,11 +1,11 @@
 import Notification from 'rc-notification';
 
-function getNotificationInstance() {
+function getNotificationInstance(top) {
   if (!Notification.notification) {
     Notification.notification = Notification.newInstance({
       prefixCls: 'ant-notification',
       style: {
-        top: 0,
+        top: isNaN(top) ? 24 : top,
         right: 0
       }
     });
@@ -14,12 +14,31 @@ function getNotificationInstance() {
 }
 
 function notice(args) {
-  getNotificationInstance();
+  getNotificationInstance(args.top);
   if (args.icon) {
-    let prefixCls = 'ant-notification-notice-content-icon-';
+    let prefixCls = ' ant-notification-notice-content-icon-';
+
+    let iconClass = 'anticon anticon-';
+    switch (args.icon) {
+      case 'success':
+        iconClass += 'check-circle-o';
+        break;
+      case 'info':
+        iconClass += 'info-circle-o';
+        break;
+      case 'error':
+        iconClass += 'exclamation-circle-o';
+        break;
+      case 'warn':
+        iconClass += 'question-circle-o';
+        break;
+      default:
+        iconClass += 'info-circle';
+    }
+
     Notification.notification.notice({
       content: <div>
-        <i className={'anticon anticon-question-circle-o ' + prefixCls + 'icon'}></i>
+        <i className={iconClass + prefixCls + 'icon-' + args.icon + prefixCls + 'icon'}></i>
         <p className={prefixCls + 'message'}>{args.message}</p>
         <p className={prefixCls + 'description'}>{args.description}</p>
       </div>,
@@ -29,20 +48,19 @@ function notice(args) {
       style: {}
     });
   } else {
+    let prefixCls = 'ant-notification-notice-content-';
     if (!args.btn) {
-      let prefixCls = 'ant-notification-notice-content-';
       Notification.notification.notice({
         content: <div>
-            <p className={prefixCls + 'message'}>{args.message}</p>
-            <p className={prefixCls + 'description'}>{args.description}</p>
-          </div>,
+          <p className={prefixCls + 'message'}>{args.message}</p>
+          <p className={prefixCls + 'description'}>{args.description}</p>
+        </div>,
         duration: null,
         closable: true,
         onClose: args.onClose,
         style: {}
       });
     } else {
-      let prefixCls = 'ant-notification-notice-content-';
       Notification.notification.notice({
         content: <div>
           <p className={prefixCls + 'message'}>{args.message}</p>
diff --git a/components/notification/index.md b/components/notification/index.md
index a41d35f53a..2c18608f37 100644
--- a/components/notification/index.md
+++ b/components/notification/index.md
@@ -17,7 +17,7 @@
 |----------- |---------------------------------------------    | ----------- |--------|
 | message    | 通知提醒标题，必选                                 | String      | 无     |
 | description | 通知提醒内容，必选                                | String      | 无     |
-| icon       | 通知提醒框的左侧有Icon                             | Boolean     | false  |
+| icon       | 通知提醒框的左侧Icon，默认没有，有四种选择`success`、`info`、`warn`、`error` | String | 无     |
 | btn        | 自定义关闭按钮                                    | String      | 无     |
+| top        | 通知提醒框距离顶部的距离，只在初始化时设置有效，默认`24`           | Number      | 24     |
 | onClose    | 点击默认关闭按钮时触发的回调函数                     | Function    | 无     |
-| customClose | 点击自定义按钮时触发的回调函数                      | Function    | 无     |
diff --git a/style/components/notification.less b/style/components/notification.less
index b8fbbcd1e7..1d5f4baf2b 100644
--- a/style/components/notification.less
+++ b/style/components/notification.less
@@ -2,16 +2,15 @@
 
 @notificationPrefixCls: ~"@{css-prefix}notification";
 
-@notificationPosition: 24px;
 @noticeWidth: 335px;
 @noticePadding: 16px;
-@noticeMarginTop: 10px;
+@noticeMarginBottom: 10px;
 
 .@{notificationPrefixCls} {
   position: fixed;
   z-index: 1000;
   width: @noticeWidth;
-  margin: (@notificationPosition - @noticeMarginTop) @notificationPosition 0 0;
+  margin-right: 24px;
 
   &-notice {
     padding: @noticePadding;
@@ -20,7 +19,7 @@
     background: @body-background;
     line-height: 1.5;
     position: relative;
-    margin-top: @noticeMarginTop;
+    margin-bottom: @noticeMarginBottom;
     overflow: hidden;
 
     &-content {
@@ -54,7 +53,19 @@
         top: 50%;
         margin-top: -26px;
         font-size: 35px;
-        color: @primary-color;
+
+        &-success{
+          color: @success-color;
+        }
+        &-info{
+          color: @primary-color;
+        }
+        &-warn{
+          color: @warning-color;
+        }
+        &-error{
+          color: @error-color;
+        }
       }
     }
 
@@ -92,7 +103,7 @@
 
   &-fade-leave {
     opacity: 1;
-    margin-top: @noticeMarginTop;
+    margin-bottom: @noticeMarginBottom;
     padding-top: @noticePadding;
     padding-bottom: @noticePadding;
     max-height: 150px;
@@ -102,7 +113,7 @@
   &-fade-leave&-fade-leave-active {
     opacity: 0;
     max-height: 0;
-    margin-top: 0;
+    margin-bottom: 0;
     padding-top: 0;
     padding-bottom: 0;
   }