Javascript HTML内容层叠在一起

我在我的图像网格中添加了一些翻转动画（javascirpt）。这需要我添加一些额外的css来设置“back”div的样式。图像网格现在位于div.instagram元素后面和footer元素前面。在中时，所有divs层都位于彼此的顶部

$（文档）.ready（函数（）{
$（“.success”）.hide（）；
$（“表格”）。提交（功能（e）{
e、 预防默认值（）；
$（“#想要玩”）.hide（）；
$（“.success”）.show（）；
});
$（“.successcollab”）.hide（）；
$（“表格”）。提交（功能（e）{
e、 预防默认值（）；
$（“#协作”）.hide（）；
$（“.successcollab”）.show（）；
});
$（document）.on（“click”，“.flip container”，function（））{
$（this.toggleClass（'hover'）；
});
});
@font-face{
字体系列：Geomanist常规；
src:url（'font/Geomanist Regular.otf'）；
}
@字体{
字体系列：Geomanist粗体；
src:url（'font/Geomanist Bold.otf'）；
}
#标题{
背景色：#000；
边缘底部：70像素；
}
#标题a{
颜色：#fff；
过渡：颜色0.5s；
字体系列：“Geomanist Bold”，helvetica，无衬线；
}
#顶梁{
颜色：#ffffff；
边框底部：2倍实心；
垫底：10px；
边框颜色：透明；
过渡：边界底部0.5s；
}
#标题：悬停{
颜色：#7ed321；
边框颜色：#7ed321；
}
#标题。选择了一个范围{
颜色：#7ED321；
}
#收割台img{
宽度：40px；
右边距：10px；
显示：内联块；
垂直对齐：顶部；
利润上限：-15px；
}
#头李{
左边距：30px；
字体大小：20px；
}
navbar先生{
填充顶部：25px；
垫底：20px；
}
.导航栏标题a{
字体系列：“Geomanist Bold”，helvetica，无衬线；
}
.navbar品牌{
字体大小：30px；
字体系列：“Geomanist Bold”，helvetica，无衬线；
边框底部：无；
}
.导航条反转{
背景色：#000000；
}
.底部{
垫底：20px；
}
.主页主界面{
最小高度：570px；
背景图像：url（'/images/mainimage.jpg'）；
背景重复：无重复；
边界半径：0px；
边缘底部：40px；
}
.垂直文本主{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-25%）；
}
.wheredoweplay{
填充顶部：30px；
垫底：20px；
}
Wantto先生{
填充顶部：30px；
}
想玩吗{
填充顶部：30px；
垫底：20px；
}
.instagram{
填充顶部：20px；
填充底部：40px；
}
.instagram h2{
垫底：20px；
}
.集装箱2{
位置：相对位置；
滤镜：灰度（0%）；
过渡：过滤器1s；
}
.container2:悬停{
滤镜：灰度（100%）；
}
.中心{
位置：绝对位置；
左：0；
最高：88%；
宽度：100%；
颜色：#ffffff；
文本对齐：居中；
字号：18px；
过渡：颜色1s；
}
.center:悬停{
光标：指针；
颜色：#7ED321；
}
中心小{
位置：绝对位置；
左：0；
最高：76%；
宽度：100%；
颜色：#ffffff；
文本对齐：居中；
字号：18px；
过渡：颜色1s；
}
h3.centersmall：悬停{
光标：指针；
颜色：#7ED321；
}
img.playerpics{
宽度：100%；
高度：自动；
边缘底部：30px；
}
.alextext{
背景色：#000000；
边缘底部：30px；
颜色：#ffffff；
文本对齐：居中；
填充顶部：30%；
垫底：23.5%；
左侧填充：30px；
右侧填充：30px；
}
.readmore{
光标：指针；
}
伊姆格·塞皮克斯{
边缘顶部：20px；
}
垂直集装箱{
高度：570px；
位置：相对位置；
}
垂直文本段{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-60%）；
}
formpadding{
填充顶部：20px；
}
.formmaxwidth输入{
最大宽度：400px；
显示：内联块；
}
textarea.form-control{
高度：自动；
颜色：#000；
显示：内联块；
最大宽度：400px；
边框颜色：#eee；
边界半径：0px；
填充顶部：15px；
左侧填充：20px；
垫底：15px；
}
.窗体控件：焦点{
边框颜色：#7DC42E；
盒影：无；
}
ul.navtheclubli{
字体系列：“Geomanist Bold”，helvetica，无衬线；
字号：18px；
显示：内联块；
右边填充：40px；
填充顶部：40px；
}
.面包屑.激活{
颜色：#000000；
}
.文本中心{
文本对齐：居中；
}
.签核{
字体系列：“Geomanist Bold”，helvetica，无衬线；
}
.标题p{
字体系列：“Geomanist Bold”，helvetica，无衬线；
字体大小：13px；
字体大小：400；
颜色：#999；
}
面包屑{
背景色：#ffffff；
字体系列：“Geomanist Bold”，helvetica，无衬线；
字体大小：13px；
左侧填充：0px；
}
h1{
字体系列：“Geomanist Bold”，helvetica，无衬线；
字体大小：50px；
}
氢{
字体系列：“Geomanist Bold”，helvetica，无衬线；
字体大小：32px；
填充顶部：20px；
}
身体{
字体系列：“Geomanist Bold”，helvetica，无衬线；
填充顶部：70px；
颜色：#000；
}
p{
字体系列：“Geomanist常规”，helvetica，无衬线；
字号：18px；
线高：28px；
}
.smalltext{
字体大小：11px；
}
a、 链接{
颜色：#CBCB；
字体系列：“Geomanist Bold”，helvetica，无衬线；
过渡：颜色0.5s；
边框底部：2倍实心；
边框颜色：透明；
过渡：边界底部0.5s；
}
a、 链接：悬停{
颜色：#7ED321；
文字装饰：无；
边框颜色：#7ed321；
}
按钮。输入详细信息{
字体系列：“Geomanist Bold”，helvetica，无衬线；
字体大小：16px；
边界半径：0px；
背景色：#7ED321；
垂直对齐：中间对齐；
边界：0px；
最小宽度：190px；
高度：48px；
过渡：背景色0.5s；
}
按钮。输入详细信息：悬停{
背景色：#7DC42E；
}
按钮。输入详细信息：焦点{
大纲：0；
}
按钮。输入详细信息img{
左：3倍；
转换：转换（0px，0）；
过渡：均为0.5s；
}
按钮。输入详细信息：悬停img{
转换：转换（10px，0）；
}
.表格组输入{
字体系列：“Geomanist常规”，helvetica，无衬线；
边框：1px实心#eee；
颜色：#000；
高度：48px；
填充：0 20px；
最小宽度：240px；
边界半径：0px；
}