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 1}}但它不起作用。我试过把它固定但不起作用。再次点击按钮，它应该再次显示文本。

Answer 1

首先，你拼写了＃34;位置＆＃34;错误#para。将其更改为：

#para {
  position: absolute;
  top: 10%;
}

这会使段落位于一个位置;它不会移动。

Answer 2

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

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

＆＃13;

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";
    }
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 3

固定可行，但您可能希望使用绝对值＆＃39;相反，如果你想让它锚定到它的父级而不是窗口本身。

此外，＆＃39;位置＆＃39;拼写错误;不确定它是否在您的测试代码中。

＆＃39; top＆＃39;必须为元素设置属性才能知道 where 锚定自身，＆＃39; position＆＃39;属性是要锚定的。

HTML

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

CSS

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

  #para {
    position: absolute;
    top:70;
  }
 </style>

*您也可能想要移动＃para;＃para;在＆＃39;＃parentdiv＆＃39;，但这取决于你最终会做什么，它也在内部工作。

<强>加了：

要包含75px的警报，您必须使用一个能够为您提供更精细控制的功能（据我所知）。这是一个解决方案：

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

   mybutt.addEventListener("click", transitionfunction);



  var intHeight = $("#box").css("height").split("p")[0];

  function transitionfunction() {
   if(intHeight < 100) {
        intHeight++;
        $("#box").css("height", intHeight + "px");
        if (intHeight===76)
            alert("75px!")
        requestAnimationFrame(transitionfunction);
     }
     intHeight = $("#box").css("height").split("p")[0];
     mybutt.addEventListener("click", revtransitionfunction);
     mybutt.removeEventListener("click", transitionfunction);

  }

  function revtransitionfunction() {
    if(intHeight >= 50) {
        intHeight--;
        $("#box").css("height", intHeight + "px");
        if (intHeight===74)
            alert("75px!")
        requestAnimationFrame(revtransitionfunction);
    }
    intHeight = $("#box").css("height").split("p")[0];
    mybutt.addEventListener("click", transitionfunction);
    mybutt.removeEventListener("click", revtransitionfunction);


  }

如何使div增长以覆盖javascript中的段落并进行转换？

3 个答案: