如何更改 dat.gui 下拉菜单的位置？答案

【问题标题】：How do I change the location of the dat.gui dropdown?如何更改 dat.gui 下拉菜单的位置？
【发布时间】：2014-09-03 21:04:28
【问题描述】：

我正在使用 dat.gui，我想将它放置在与右上角不同的位置，最好是在顶部重叠三个.js 画布，这是通过命令完成的，还是有一些 css 可以做到把戏？

【问题讨论】：

标签： javascript dat.gui

【解决方案1】：

您需要一些 JavaScript 和 CSS 来执行此操作。

GUI 构造函数可以传递一个参数对象。您可以告诉控件不要自动放置。您还可以附加元素 ID 以简化样式

var gui = new dat.GUI( { autoPlace: false } );
gui.domElement.id = 'gui';

然后放置它的 CSS 可以是这样的：

#gui { position: absolute; top: 2px; left: 2px }

【讨论】：

TY，当我 autoPlace: false 时它不起作用，但是当我更改 eid 并将 css 添加到该 id 时它工作得很好。你知道是否有办法阻止它偶然滚动屏幕？无论用户在页面的哪个位置，都阻止它被看到。
只需将以下代码添加到您的样式中：
这是一个 baaaaaaaaaaaaaaaaaaaaaaaad API。

【解决方案2】：

接受的答案回答了我的问题，但并不完全是我解决问题的目的，当我在页面上上下滚动时，请对我进行 gui 滚动。我没有为 gui domElement 设置 ID，而是将该元素附加到可以更好地控制的现有元素中。

css:

.moveGUI{ 
    position: absolute;
    top: 13.1em;
    right: -1em;
}

JS：

// Create GUI   
    gui = new dat.GUI( { autoPlace: false } );
    {
        // create fill and open folders
    }
    var customContainer = $('.moveGUI').append($(gui.domElement));

HTML：

<div  class = 'moveGUI'>
</div>

【讨论】：

【解决方案3】：

覆盖 CSS：

.dg.a { margin-right:60px !important; }

【讨论】：

【解决方案4】：

个人比较喜欢用：

    function datgui(){
    let gui = new dat.GUI({
        width : 300
    });

【讨论】：