javascript - 如何使 div 增长以覆盖带有过渡的 javascript 中的段落？

Question

我正在尝试使用应该增长并与文本重叠的 div 进行转换。这是我的代码

  const box = document.querySelector("#box");
  const mybutt = document.querySelector("#mybutt");

  mybutt.addEventListener("click", transitionfunction);

 function transitionfunction() {
  if(box.style.height != "100px"){
    box.style.height = "100px";
    box.style.transition = "2s";
    }
  else {
   box.style.height = "50px";
   box.style.transition = "2s";
    }
  }

#box {
  background: red;
  height: 50px;
  width: 50px;
 }

 #para {
  postion: fixed;
 }

  <div id="parentdiv">
   <div id="box"></div>
   <p id="para">Help</p>
 </div>
 <button id="mybutt">click</button>

此刻，点击按钮，按钮和段落 para 都向下移动，我希望它们固定，我想要 div，#box 来覆盖 para 但它不起作用。我试着把它固定但不起作用。再次点击按钮，它应该会再次显示文本。

Answer 1

如果你使用position: fixed;，你应该手动设置top属性。

要使 div 覆盖一些文本，请使用 z-index

const box = document.querySelector("#box");
const mybutt = document.querySelector("#mybutt");

mybutt.addEventListener("click", transitionfunction);

function transitionfunction() {
    if (box.style.height != "100px"){
        box.style.height = "100px";
        box.style.transition = "2s";
    } else {
       box.style.height = "50px";
       box.style.transition = "2s";
    }
}

#mybutt {
    position: fixed;
    top: 120px;
}

#box {
    background: red;
    position: fixed;
    height: 50px;
    width: 50px;
    z-index: 2;
}

#para {
    position: fixed;
    z-index: 1;
    top: 60px;
}

<div id="parentdiv">
   <div id="box"></div>
   <p id="para">Help</p>
</div>
<button id="mybutt">click</button>