diff --git a/src/dat/gui/GUI.js b/src/dat/gui/GUI.js
index e037111..a4d6b62 100644
--- a/src/dat/gui/GUI.js
+++ b/src/dat/gui/GUI.js
@@ -75,6 +75,7 @@ const hideableGuis = [];
  * @param {Boolean} [params.auto=true]
  * @param {dat.gui.GUI} [params.parent] The GUI I'm nested in.
  * @param {Boolean} [params.closed] If true, starts closed
+ * @param {Boolean} [params.closeOnTop] If true, close/open button shows on top of the GUI
  */
 const GUI = function(pars) {
   const _this = this;
@@ -129,6 +130,7 @@ const GUI = function(pars) {
 
   // Default parameters
   params = common.defaults(params, {
+    closeOnTop: false,
     autoPlace: true,
     width: GUI.DEFAULT_WIDTH
   });
@@ -196,6 +198,16 @@ const GUI = function(pars) {
         }
       },
 
+      /**
+       * Handles <code>GUI</code>'s position of open/close button
+       * @type Boolean
+       */
+      closeOnTop: {
+        get: function() {
+          return params.closeOnTop;
+        }
+      },
+
       /**
        * The identifier for a set of saved values
        * @type String
@@ -335,7 +347,13 @@ const GUI = function(pars) {
     this.__closeButton = document.createElement('div');
     this.__closeButton.innerHTML = GUI.TEXT_CLOSED;
     dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BUTTON);
-    this.domElement.appendChild(this.__closeButton);
+    if (params.closeOnTop) {
+      dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_TOP);
+      this.domElement.insertBefore(this.__closeButton, this.domElement.childNodes[0]);
+    } else {
+      dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BOTTOM);
+      this.domElement.appendChild(this.__closeButton);
+    }
 
     dom.bind(this.__closeButton, 'click', function() {
       _this.closed = !_this.closed;
@@ -441,6 +459,8 @@ GUI.CLASS_CONTROLLER_ROW = 'cr';
 GUI.CLASS_TOO_TALL = 'taller-than-window';
 GUI.CLASS_CLOSED = 'closed';
 GUI.CLASS_CLOSE_BUTTON = 'close-button';
+GUI.CLASS_CLOSE_TOP = 'close-top';
+GUI.CLASS_CLOSE_BOTTOM = 'close-bottom';
 GUI.CLASS_DRAG = 'drag';
 
 GUI.DEFAULT_WIDTH = 245;
diff --git a/src/dat/gui/_structure.scss b/src/dat/gui/_structure.scss
index 9e316a2..13630ef 100644
--- a/src/dat/gui/_structure.scss
+++ b/src/dat/gui/_structure.scss
@@ -62,7 +62,6 @@ $button-height: 20px;
       /*opacity: 0;*/
       @include transition(opacity, 0.1s, linear);
       border: 0;
-      position: absolute;
 
       line-height: $button-height - 1;
       height: $button-height;
@@ -71,6 +70,12 @@ $button-height: 20px;
       cursor: pointer;
       text-align: center;
       background-color: #000;
+      &.close-top {
+        position:relative;
+      }
+      &.close-bottom {
+        position: absolute;
+      }
       &:hover {
         background-color: #111;
       }
diff --git a/tests/index.html b/tests/index.html
index 8f2880d..c5b13ca 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -1051,11 +1051,23 @@ console.log(c2.__checkbox.getAttribute('checked'));
 
         gui.destroy();
       }, 0);
-
-
-
-
     });
+      
+    test('close/open button position', function() {
+
+      var gui = new GUI({closeOnTop:true});
+      var gui2 = new GUI({closeOnTop:false});
+      var gui3 = new GUI();
+
+      ok($(gui.domElement).find('ul').prev().hasClass(GUI.CLASS_CLOSE_BUTTON) && $(gui.domElement).find('ul').prev().hasClass(GUI.CLASS_CLOSE_TOP), 'GUI has close/open button on top');
+      ok($(gui2.domElement).find('ul').next().hasClass(GUI.CLASS_CLOSE_BUTTON) && $(gui2.domElement).find('ul').next().hasClass(GUI.CLASS_CLOSE_BOTTOM), 'GUI has close/open button on bottom');
+      ok($(gui3.domElement).find('ul').next().hasClass(GUI.CLASS_CLOSE_BUTTON) && $(gui3.domElement).find('ul').next().hasClass(GUI.CLASS_CLOSE_BOTTOM), 'GUI has close/open button on bottom by default');
+        
+      gui.destroy();
+      gui2.destroy();
+      gui3.destroy();
+
+    });  
 
     test('Folders', function() {