Javascript 将div附加到响应的父div

我对Javascript、CSS和HTML的整个部分都有点陌生

我正在尝试将一个div附加到父div的底部和中心。 父div中有一个响应的背景图像。我的fa-fa箭头固定在底部，在垂直方向上响应，而不是水平方向，也不是居中方向

请任何一个善良的灵魂解释一下如何解决这个问题，或者告诉我，如果我一开始就错了

提前谢谢

这是我的密码：

HTML:

Javascript:

var main = function() {

$(document).ready(function() {
 $('#to-first').show(); 
});

$('#to-first').click(function() {
  $('body,html').animate({scrollTop: $("footer").offset().top},"slow");
});    

};
$(document).ready(main);

下面是一个JSFIDLE：

---

将您的内容放在绝对值的第一位，在内容的底部，并给它100%的宽度

给你的内容加一个高度，否则它是空的，里面有一个绝对值的元素

.content-1{
位置：相对位置；
高度：500px；
边框：1px纯红；
}
#首先{
位置：绝对位置；
宽度：100%；
底部：10px；
颜色：#000；
字体大小：50px；
文本对齐：居中；
光标：指针；
边框：1px纯绿色；
}

---

将您的内容放在绝对值的第一位，在内容的底部，并给它一个100%的宽度

给你的内容加一个高度，否则它是空的，里面有一个绝对值的元素

.content-1{
位置：相对位置；
高度：500px；
边框：1px纯红；
}
#首先{
位置：绝对位置；
宽度：100%；
底部：10px；
颜色：#000；
字体大小：50px；
文本对齐：居中；
光标：指针；
边框：1px纯绿色；
}

.content-1 {
  position: relative;
}

#to-first {
  position: absolute;
  margin-right: 50%;
  bottom: 10;
  color: #000;
  font-size: 50px;
  text-align: center;
  cursor: pointer;
  display: none;
}

var main = function() {

$(document).ready(function() {
 $('#to-first').show(); 
});

$('#to-first').click(function() {
  $('body,html').animate({scrollTop: $("footer").offset().top},"slow");
});    

};
$(document).ready(main);