將div附加到響應的父div上

Question

我對Javascript，CSS和HTML的整個部分有點新鮮。

我想一個div附加到父div的底部和中心。 父級div中有一個響應式背景圖片。我的發條箭頭貼在底部，在垂直方向響應，不是水平的，也不居中。

請問任何一種靈魂，請解釋如何解決這個問題，或告訴我，如果我開始錯了！

在此先感謝。

這裏是我的代碼：

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

將您的第一個絕對位置放置在內容的底部，並將其寬度設置爲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"> 
 
\t <i class="fa fa-angle-down"></i> 
 
    </div> 
 
</div>