Div 不会移动到位答案

【问题标题】：Div wont move into placeDiv 不会移动到位
【发布时间】：2022-06-30 23:22:57
【问题描述】：

我试图将 2 个 div 垂直移动到位，但它们不会向下移动。我尝试了几件事，例如在#btnL1 和#btnL2 中添加顶部和底部，但它们没有做任何事情。当我尝试将它们的位置设置为绝对时，它们不再可见，但仍然存在。这是我正在处理的网站的链接：https://orbiting-simulator.erodecode.repl.co

.menuBtn {
  position: absolute;
  width: 60px;
  top: 3%;
  left: 3%;
  box-shadow: -12px 12px 1em 0em rgb(0 0 0 / 20%);  
    border-radius: 5px;
    background-color: rgba(255, 255, 255, .15);
    backdrop-filter: blur(3px);
  -webkit-user-select: none;       
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: transform 100ms ease-in-out;
}
.menuBtn:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}
.btnL {
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
}
#btnL1 {
  height: 15%;
  background: darkcyan;
  border-radius: 5px;
  transform: rotate(45deg);
}
#btnL2 {
  height: 15%;
  background: darkcyan;
  border-radius: 5px;
  transform: rotate(-45deg);
}

<div class='menuBtn' onclick='menuOpen()'>
  <div class='btnL'>
     <div id='btnL1'></div>
     <div id='btnL2'></div>
  </div>
</div>

【问题讨论】：

在类 menuBtn 的 div 中搞乱顶级样式我尝试了 40%，它似乎居中
我正在尝试将 menuBtn div 中的 2 条青色线移动到 menuBtn 的中心。

标签： javascript html css

【解决方案1】：

它们不可见，因为缺少 width 属性。有了这个，它应该有你正在寻找的效果：

#btnL1 {
  height: 15%;
  background: darkcyan;
  border-radius: 5px;
  transform: rotate(45deg);
  width: 50px;
  position: absolute;
  top: 20px;
}    

#btnL2 {
  height: 15%;
  background: darkcyan;
  border-radius: 5px;
  transform: rotate(-45deg);
  width: 50px;
  position: absolute;
  top: 20px;
}

【讨论】：