Javascript 将输入置于段落之前

我正在用输入创建一个小效果，但我面临一个问题

我有一个输入，作为占位符，我使用了一个段落，我使用

translate

在输入中定位

我所做的是当输入被聚焦时，段落被上移，而当它没有聚焦时，它被放回其原始位置，“在”输入中

像这样：

问题是，为了使输入集中，我必须单击它，但是

p

在它前面，因此，当我单击文本时，我没有到达输入，因此它没有集中，并且

p

没有移动

有没有办法在输入后面发送

p

？我试过使用

z-index

，但似乎对输入不起作用

有没有类似的方法可以奏效

const placeholder=document.getElementsByClassName（'frete-input-placeholder'）[0].parentNode.children
常量h2=document.getElementById（'h2'）
window.addEventListener（'click'，（）=>{
if（占位符[1]==document.activeElement）{
占位符[0]。style.transform='translate（0，30px）'
h2.innerHTML='FOCUSED'
}否则{
占位符[0]。style.transform='translate（055px）'
h2.innerHTML='未聚焦'
}
})

.frete calculo-cep{
显示器：flex；
证明内容：之间的空间；
对齐项目：柔性端；
宽度：65%；
}
.frete计算主管部{
宽度：62%；
}
.frete输入占位符{
背景色：番茄；
宽度：20%；
左边距：10px；
转换：转换（0，55px）；
过渡：0.5s；
}
.frete计算输入{
最大宽度：93%；
高度：42px；
大纲：无；
边框：1px实心#BEBEBE；
左侧填充：10px；
字号：18px；
z指数：9999；
边界半径：3px；
}
.FRET calculo cep输入：焦点{
大纲：无；
边框：1px实心#5A98FF；
}
.frete计算器cep按钮{
宽度：35%；
高度：45px；
背景色：#5F22A8；
颜色：白色；
字体大小：粗体；
字号：17px；
边界：0；
光标：指针；
边界半径：3px；
}
.frete calculo cep按钮：悬停{
背景色：#7032bb；
}
.frete calculo cep按钮：焦点{
大纲：0；
}

数字seu CEP

没有重点

只需在CSS中设置段落即可

但是，也是非常非常不好的代码。而是使用

document.querySelector

，如下所示

而且，不要使用内联样式，始终尝试使用CSS类，您可以轻松地添加、删除或切换这些类

最后，当您使用的字符串中没有HTML时，不要使用

.innerHTML

。innerHTML会影响安全性和性能。改用

const placeholder=document.querySelector（'.frete输入占位符'）；
常量输入=document.querySelector（“输入”）；
常量h2=document.getElementById（'h2'）
window.addEventListener（'click'，（）=>{
if（输入===document.activeElement）{
占位符.classList.add（“聚焦”）；
h2.textContent='FOCUSED'
}否则{
占位符.classList.remove（“聚焦”）；
h2.textContent='未聚焦'
}
})

.frete calculo-cep{
显示器：flex；
证明内容：之间的空间；
对齐项目：柔性端；
宽度：65%；
}
.frete计算主管部{
宽度：62%；
}
.frete输入占位符{
背景色：番茄；
宽度：20%；
左边距：10px；
转换：转换（0，55px）；
过渡：0.5s；
指针事件：无；/*我只是用
绝对位置将
p
移到后面


const placeholder=document.getElementsByClassName（'frete-input-placeholder'）[0].parentNode.children
常量h2=document.getElementById（'h2'）
window.addEventListener（'click'，（）=>{
if（占位符[1]==document.activeElement）{
占位符[0]。style.transform='translate（0，30px）'
h2.innerHTML='FOCUSED'
}否则{
占位符[0]。style.transform='translate（055px）'
h2.innerHTML='未聚焦'
}
})
.frete calculo-cep{
显示器：flex；
证明内容：之间的空间；
对齐项目：柔性端；
宽度：65%；
边缘顶部：50px；
}
.frete计算主管部{
宽度：62%；
}
.frete输入占位符{
背景色：番茄；
宽度：20%；
左边距：10px；
位置：绝对位置；
顶部：-20px；
转换：转换（0，55px）；
过渡：0.5s；
}
.frete计算输入{
最大宽度：93%；
高度：42px；
大纲：无；
边框：1px实心#BEBEBE；
左侧填充：10px；
字号：18px；
z指数：9999；
边界半径：3px；
}
.FRET calculo cep输入：焦点{
大纲：无；
边框：1px实心#5A98FF；
}
.frete计算器cep按钮{
宽度：35%；
高度：45px；
背景色：#5F22A8；
颜色：白色；
字体大小：粗体；
字号：17px；
边界：0；
光标：指针；
边界半径：3px；
}
.frete calculo cep按钮：悬停{
背景色：#7032bb；
}
.frete calculo cep按钮：焦点{
大纲：0；
}
#输入1{
位置：相对位置；
}

数字seu CEP

未聚焦