javascript - 将 div 附加到响应式父 div

Question

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

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

任何好心人都可以解释一下如何解决这个问题，或者告诉我我是否一开始就错了!

提前致谢。

这是我的代码:

HTML:

<div class="content-1">
  <div id="to-first">
   <i class="fa fa-angle-down"></i>
  </div>
</div> 

CSS:

.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;
}

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);

这是一个 jsfiddle:

https://jsfiddle.net/804jeg82/330/

Answer 1

将你的 to-first 绝对定位在内容的底部，并将其宽度设置为 100%；

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

.content-1 {
    position: relative;
    height: 500px;
    border: 1px solid red;
}

#to-first {
  position: absolute;
  width: 100%;
  bottom: 10px;
  color: #000;
  font-size: 50px;
  text-align: center;
  cursor: pointer;
  border: 1px solid green;
}
 

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="content-1">
  <div id="to-first">
	<i class="fa fa-angle-down"></i>
  </div>
</div>