如何在没有绝对位置的情况下保持 Div 到位

Question

我一定是误解了 CSS 中的某些内容，因为我使用库 (dat-gui) 的下拉框正在这样做：

我试过为 dat-gui 容器下面的 div 切换到 position: absolute，这破坏了它下面的 div。

有趣的是，当我使用 SO 嵌入代码段时，它确实有效。因此，请查看网站的实际部署：https://stack-test.netlify.com/

function UI (parentDiv) {
  // parentDiv.querySelector('#dataset_div').style.display = 'none'
  // parentDiv.querySelector('#channel_div').style.display = 'none'
  // parentDiv.querySelector('#OpenCORLinkButton').style.display = 'none'
  // parentDiv.querySelector('#instructions_div').style.display = 'none'
  var _this = this
  _this.dataType = 'scatter'
  const gui = new dat.GUI({autoPlace: false})
  gui.domElement.id = 'gui'
  gui.close()
  document.getElementsByClassName('dat-gui-container')[0].appendChild(gui.domElement)
  var folder = gui.addFolder('Channels')
  var settings = {}
  var checkboxes = []
  var checkboxElements = []

  this.createDatGuiDropdown = function (channels, onchangeFunc) {
    _this.channels = [...channels]
    if (channels[0].toLowerCase().includes('time')){
      channels.shift()
    }
    checkboxes = []
    for (let i in _this.channels) {
      let name = _this.channels[i]
      let checkbox = {}
      checkbox[name] = false
      checkboxes.push(checkbox)
      var el = folder.add(checkboxes[i], name)
      checkboxElements.push(el)
      el.__checkbox.onclick = onchangeFunc
    }
    folder.open()
   
  }  
}

var ui = new UI('unused')
ui.createDatGuiDropdown(['one', 'two'], function(){console.log('clicked')})

/*//////////////////////////////////////////////////////////////////
[ dat-gui ]*/

.dat-gui-container{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 95%;
  z-index: 5;
}


/*//////////////////////////////////////////////////////////////////
[ login ]*/

.limiter {
  width: 100%;
  margin: 0 auto;
}

.container-login100 {
  width: 100%;  
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;;
}


.wrap-login100 {
  width: 390px;;
  background: #fff;
  border-radius: 10px;
  position: relative;
}

.wrap-data100 {
  width: 90%;
  background: #fff;
  border-radius: 10px;
  position: relative;
}


/*==================================================================
[ Form ]*/

.login100-form {
  width: 100%;
}

.login100-form-title {
  font-family: Ubuntu-Bold;
  font-size: 30px;
  color: #403866;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;

  width: 100%;
  display: block;
}

/*==================================================================
[ Restyle Select2 ]*/

.select2-container {
  display: block;
  max-width: 100% !important;
  width: auto !important;
}

.select2-container .select2-selection--single {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  background-color: rgba(171, 171, 189, 0.233);
  border: none;
  height: 40px;
  outline: none;
  position: relative;
  left: -40px;
}

/*------------------------------------------------------------------
[ in select ]*/
.select2-container .select2-selection--single .select2-selection__rendered {
  font-family: Ubuntu-Bold;
  font-size: 18px;
  color: #555555;
  line-height: 1.2;
  padding-left: 0px ;
  background-color: transparent;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  right: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.select2-selection__arrow b {
  display: none;
  font-family: Material-Design-Iconic-Font !important;
  font-size: 18px;
  color: #555555;
}

.select2-selection__arrow {
  content: '\f312';
  font-family: Material-Design-Iconic-Font !important;
  font-size: 18px;
  color: #555555;
}


/*------------------------------------------------------------------
[ Dropdown option ]*/
.select2-container--open .select2-dropdown {
  z-index: 1251;
  width: calc(100% + 2px);
  border: 0px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background-color:  rgba(171, 171, 189, 1);
  left: -40px;

  box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
}

@media (max-width: 576px) {
  .select2-container--open .select2-dropdown {
    left: -12px;
  }
}

.select2-dropdown--above {top: -38px;}
.select2-dropdown--below {top: 10px;}

.select2-container .select2-results__option[aria-selected] {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 24px;
}

@media (max-width: 576px) {
  .select2-container .select2-results__option[aria-selected] {
    padding-left: 12px;
  }
}

.select2-container .select2-results__option[aria-selected="true"] {
  background: #403866;
  color: white;
}

.select2-container .select2-results__option--highlighted[aria-selected] {
  background: #827ffe;
  color: white;
}

.select2-results__options {
  font-family: Ubuntu-Bold;
  font-size: 14px;
  color: #555555;
  line-height: 1.2;
}

.select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
  outline: none;
  font-family: Ubuntu-Bold;
  font-size: 15px;
  color: #333333;
  line-height: 1.2;
}

.wrap-input100 .dropDownSelect2 .select2-container--open {
  width: 100% !important;
}

.wrap-input100 .dropDownSelect2 .select2-dropdown {
  width: calc(100% + 2px) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
 <title>Blackfynn Exporter</title>
 <meta charset="UTF-8">
 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>

<body> 

 <div id='blackfynn-panel' style="position: relative;">
  <div class="dat-gui-container"></div>
   <div class="container-login100 datasetUI" id="dataset_div">
    <div class="wrap-data100 p-t-5 p-b-5 datasetUI">
     <form class="contact100-form validate-form">
      <span class="login100-form-title">
       Data Viewer
      </span>
      <div class=" input100 wrap-input100 input100-select bg1 datasetUI">
       <span class="label-input100"></span>
       <div id="channel_div">
        <select class="js-select2" name="service" id="select_channel">
         <option>Channel Selection</option>
        </select>
        <div class="dropDownSelect2"></div>
       </div>
      </div>
     </form>
     <br>
     <div id="exportURL">
     </div>


    </div>
   </div>
  
  <div class="datasetUI" id="chart_div"></div>
 </div>
</body>


</html>

Answer 1

如果您查看代码段，您会发现 .dat-gui-container 已设置 position: absolute。在您的情况下，您必须将位置绝对设置为获得动画的元素，从而防止其余元素四处移动。

如何在没有绝对位置的情况下保持 Div 到位

How to keep Divs in place without absolute position

css

dat.gui