Divタグ（アニメーション矢印）がページの左下にあり、フッタのすぐ上にはありません

Question

私のバウンス矢印が常にページの左下に（私のフッターの真上に）残るようにしたいブラウザのサイズが変更されたとき。しかし、私はブラウザのサイズを変更すると、矢印は、場所のいたるところに行くと、ページの左下隅に固定されません。

#arrow { 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 60; 
 
    bottom: 60; 
 
    left: -7; 
 
    right: -47 width: 40px; 
 
    height: 40px; 
 
    font-size: 40px; 
 
    line-height: 40px; 
 
    -webkit-animation: bounce 2s infinite ease-in-out; 
 
} 
 

 
@-webkit-keyframes bounce { 
 
    0%, 
 
    20%, 
 
    60%, 
 
    100% { 
 
    -webkit-transform: translateY(0); 
 
    } 
 
    40% { 
 
    -webkit-transform: translateY(-20px); 
 
    } 
 
    80% { 
 
    -webkit-transform: translateY(-10px); 
 
    } 
 
}

<div id="arrow">click me <br>&#11015;</div>

フィドルリンク：https://jsfiddle.net/dave1231/9xLbpm4d/

Answer 1

あなたはこのような何かを意味ですか？私はあなたがより良い探して下

#arrow { 
 
    position: absolute; 
 
    margin: auto; 
 
    bottom: 4px; 
 
    font-size: 40px; 
 
    line-height: 40px; 
 
    -webkit-animation: bounce 2s infinite ease-in-out; 
 
} 
 

 
#pointer{ 
 
text-align:center; 
 

 
} 
 

 
@-webkit-keyframes bounce { 
 
    0%, 20%, 60%, 100% { -webkit-transform: translateY(0); } 
 
    40% { -webkit-transform: translateY(-20px); } 
 
    80% { -webkit-transform: translateY(-10px); } 
 
}

<div id="arrow">click me 
 
<div id="pointer"> 
 
&#11015; 
 
</div> 
 
</div>