我正在尝试使用应该增长和重叠文本的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}}但它不起作用。我试过把它固定但不起作用。再次点击按钮,它应该再次显示文本。
答案 0 :(得分:1)
首先,你拼写了#34;位置&#34;错误#para
。将其更改为:
#para {
position: absolute;
top: 10%;
}
这会使段落位于一个位置;它不会移动。
答案 1 :(得分: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";
}
}
&#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;
答案 2 :(得分:1)
固定可行,但您可能希望使用绝对值&#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);
}