Javascript 提示右下角至输入字段应响应

我是CSS新手

尝试对齐这些输入字段验证工具提示这是小提琴：

有人能帮忙吗？我该怎么做。？我可以左右移动它，但不能像下图所示那样

正文{
填充物：5em 3em；
}
输入{
填充：.5em；
}
p{
位置：相对位置；
}
.错误{
位置：绝对位置；
顶部：-3.5em；
左：0；
填充物：5em 1em.4em；
背景色：#f66；
边框：1px实心#f00；
边界半径：5px；
颜色：#fff；
}
.error：：之后，
.错误：：之前{
内容：''；
位置：绝对位置；
最高：100%；
左：15px；
边框：实心透明；
}
.错误：：之后{
左边距：1px；
边框顶部颜色：#f66；
边框宽度：7px；
}
.错误：：之前{
边框顶部颜色：#f00；
边框宽度：8px；
}

请输入文本


请输入电子邮件

我想你会喜欢这样：

正文{
填充物：5em 3em；
}
输入{
填充：.5em；
}
p{
位置：相对位置；
边缘底部：15px；
浮动：左；
明确：两者皆有；
}
.错误{
位置：绝对位置；
底部：-2.5em；
右：-68px；
填充物：5em 1em.4em；
背景色：#f66；
边框：1px实心#f00；
边界半径：5px；
颜色：#fff；
宽度：120px；
z指数：10；
}
.error：：之后，
.error:：在{
内容：''；
位置：绝对位置；
左：50%；
左边距：-5px；
边框：实心透明；
}
.错误：：之后{
左边距：-4px；
边框底色：#f66；
边框宽度：7px；
顶部：-14px；
}
.错误：：之前{
边框底色：#f00；
边框宽度：8px；
顶部：-16px；
}
@介质（最大宽度：479px）{
.错误{
右：0；
}
}

请输入文本


请输入电子邮件

只需将此添加到CSS中即可：

p {
  position: relative;
  width: 320px;
}

input {
  padding: .5em;
  margin-bottom: 30px;
}

.error {
  position: absolute;
  top: -40px;
  right: 0;
  padding: .5em 1em .4em;
  background-color: #f66;
  border: 1px solid #f00;
  border-radius: 5px;
  color: #fff;
}

如果您使用的是引导，那么它非常简单，因为引导已经有了不同位置的工具提示。 您只需要覆盖一些CSS。

正文{
填充物：5em 3em；
}
输入{
填充：.5em；
边缘：.5em；
}
p{
位置：相对位置；
}
.错误{
位置：绝对位置；
顶部：-2.6em；
左：11em；
填充物：5em 1em.4em；
背景色：#f66；
边框：1px实心#f00；
边界半径：5px；
颜色：#fff；
}
.error：：之后，
.错误：：之前{
内容：''；
位置：绝对位置；
最高：100%；
左：4.5em；
边框：实心透明；
}
.错误：：之后{
左边距：1px；
边框顶部颜色：#f66；
边框宽度：7px；
}
.错误：：之前{
边框顶部颜色：#f00；
边框宽度：8px；
}

请输入文本


请输入电子邮件

很高兴帮助您：）您只需在媒体css中将

设置为正确：0

。。。检查这里，我这样做了，但它正在穿过输入字段。