Positioning dat.GUI

answer to stack question 41404643

by Chris Brown

HTML

<script src="https://cdn.rawgit.com/dataarts/dat.gui/v0.6.2/build/dat.gui.min.js"></script>
<div id="iframe-goes-in-here">
  <div id="my-gui-container"></div>
  <iframe></iframe>
</div>

CSS

#iframe-goes-in-here {
  position: absolute;
  width: 50%;
  height: 200px;
  background-color: #ff0000;
  left: 50px;
  top: 50px;
}
#iframe-goes-in-here iframe {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
#my-gui-container {
  position: absolute;
  top: 0px;
  left: 20px;
  z-index: 10;
}

JavaScript

var text = {
  message: 'dat.gui',
  speed: 0.8,
  displayOutline: false,
};

var gui = new dat.GUI({ autoPlace: false });
var menu = gui.addFolder('folder');
menu.add(text, 'message');
menu.add(text, 'speed', -5, 5);
menu.add(text, 'displayOutline');
  
var customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(gui.domElement);