Jquery 如何使输入下的所有东西都处于静态位置？

我用输入创建了一个站点。
我有一个作为占位符的跨度，这样我可以在选择输入时为其设置动画。
选择输入时，占位符（span）会像预期的那样移到顶部。
但是页面的其余部分将向上移动一点，因为占位符跨度消失了。我无法向占位符添加更大的边距，即使它是5000px，边距也不起作用

如何使页面的其余部分保持静态/使页边距正常工作

我的代码（请全屏查看右文本移动，否则顶部将移动）：

@导入url（'https://fonts.googleapis.com/css?family=Raleway:400,500');
#内容{
宽度：80%；
填充顶部：57px；
填充底部：50px；
边框：1px实心#DADCE0；
边界半径：10px；
}
.中心{
文本对齐：居中；
}
h1{
边缘顶部：20px；
字体系列：“Raleway”，无衬线；
字体大小：25px；
字号：500；
颜色：#202124；
}
氢{
字体系列：“Raleway”，无衬线；
字号：17px；
字号：500；
颜色：#202124；`在此处输入代码`
}
输入{
宽度：82%；
利润上限：28px；
填充：20px 15px；
边框：1px实心#DADCE0；
边界半径：5px；
}
输入：焦点{
大纲：无！重要；
边框：2px实心#1A73E8；
边缘底部：-2px；
}
.占位符{
位置：相对位置；
左：计算（9%-3倍）；
顶部：-37像素；
填充：0 8px；
左边距：12px；
背景色：白色；
字体系列：“Raleway”，无衬线；
字号：17px；
字号：500；
颜色：rgba（32,33,36,0.60）；
-webkit过渡：前0.2s，字体大小0.2s；/*Safari 3.1到6.0*/
过渡：顶部0.2s，字体大小0.2s；
}
。已移动占位符{
顶部：-63px；
字体大小：12px；
颜色：#1A73E8；
游标：默认值；
}

嘿
嘿
占位符
$（“#输入1”）.focusin（函数（）{
$（“#占位符1”）.addClass（“占位符移动”）；
});
$（“#input1”）.focusout（函数（）{
$（“#占位符1”）.removeClass（“占位符移动”）；
});
$（“#占位符1”）。单击（函数（）{
$（“#输入1”）.focus（）；
});


此文本将移动

在

div

元素中添加了

输入

字段和

span

，将

div

高度设置为

100px

$（“#input1”）.focusin（函数（）{
$（“#占位符1”）.addClass（“占位符移动”）；
});
$（“#input1”）.focusout（函数（）{
if（$（“#input1”）.val（）=“”）{
$（“#占位符1”）.removeClass（“占位符移动”）；
}
});
$（“#占位符1”）。单击（函数（）{
$（“#输入1”）.focus（）；
});
@导入url（'https://fonts.googleapis.com/css?family=Raleway:400,500');
#内容{
宽度：80%；
填充顶部：57px；
填充底部：50px；
边框：1px实心#DADCE0；
边界半径：10px；
}
.中心{
文本对齐：居中；
}
h1{
边缘顶部：20px；
字体系列：“Raleway”，无衬线；
字体大小：25px；
字号：500；
颜色：#202124；
}
氢{
字体系列：“Raleway”，无衬线；
字号：17px；
字号：500；
颜色：#202124；`在此处输入代码`
}
输入{
宽度：82%；
利润上限：28px；
填充：20px 15px；
边框：1px实心#DADCE0；
边界半径：5px；
}
输入：焦点{
大纲：无！重要；
边框：2px实心#1A73E8；
边缘底部：-2px；
}
.占位符{
位置：相对位置；
左：计算（9%-3倍）；
顶部：-37像素；
填充：0 8px；
左边距：12px；
背景色：白色；
字体系列：“Raleway”，无衬线；
字号：17px；
字号：500；
颜色：rgba（32,33,36,0.60）；
-webkit过渡：前0.2s，字体大小0.2s；/*Safari 3.1到6.0*/
过渡：顶部0.2s，字体大小0.2s；
}
。已移动占位符{
顶部：-63px；
字体大小：12px；
颜色：#1A73E8；
游标：默认值；
}

嘿
嘿
占位符


此文本移动
添加
输入
字段和
div
元素内的
span
，将
div
高度设置为
100px


$（“#input1”）.focusin（函数（）{
$（“#占位符1”）.addClass（“占位符移动”）；
});
$（“#input1”）.focusout（函数（）{
if（$（“#input1”）.val（）=“”）{
$（“#占位符1”）.removeClass（“占位符移动”）；
}
});
$（“#占位符1”）。单击（函数（）{
$（“#输入1”）.focus（）；
});
@导入url（'https://fonts.googleapis.com/css?family=Raleway:400,500');
#内容{
宽度：80%；
填充顶部：57px；
填充底部：50px；
边框：1px实心#DADCE0；
边界半径：10px；
}
.中心{
文本对齐：居中；
}
h1{
边缘顶部：20px；
字体系列：“Raleway”，无衬线；
字体大小：25px；
字号：500；
颜色：#202124；
}
氢{
字体系列：“Raleway”，无衬线；
字号：17px；
字号：500；
颜色：#202124；`在此处输入代码`
}
输入{
宽度：82%；
利润上限：28px；
填充：20px 15px；
边框：1px实心#DADCE0；
边界半径：5px；
}
输入：焦点{
大纲：无！重要；
边框：2px实心#1A73E8；
边缘底部：-2px；
}
.占位符{
位置：相对位置；
左：计算（9%-3倍）；
顶部：-37像素；
填充：0 8px；
左边距：12px；
背格