바닥 글 위에 떠 다니는 소셜 아이콘

Question

웹 페이지의 고정 된 div 요소에 관해서 가장 잘 접근하는 방법에 대한 지침이 필요합니다.

는 문제 : 전체 폭 수평 고정 사회적 아이콘 모바일 화면 하단에 볼 수 있으며 페이지 사용자가 스크롤 할 때 당신과 함께 여행. 사용자가 스크롤하여 웹 페이지의 끝에 도달하면, 사회적 아이콘이 꼬리말 영역과 중첩됩니다.

등 원하는 목표 : 원하는 결과는하지만, 바닥 글 전에 중지하고 중복되지 아이콘을 원하는 웹 페이지의 하단에 보이는 전체 폭 수평 고정 사회적 아이콘을하는 것입니다.

예 :

어떻게이 일반적인 문제가 될 것으로 보인다 무엇으로 접근해야? 고맙습니다.

Answer 1

고정 요소의 높이와 동일한 바닥 글에 padding-bottom을 추가하면 바닥 글이 고정 된 div 위의보기로 스크롤됩니다. 이는 영업 이익은 제안 된 것과 반대 순서이지만, 가장 간단한 솔루션입니다 :

#container { 
 
    height: 1000px; 
 
    width: 100px; 
 
    background: silver; 
 
    position: relative; 
 
} 
 
#footer { 
 
    height: 50px; 
 
    width: 100%; 
 
    padding-bottom: 50px; 
 
    background: black; 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 
#fixed { 
 
    height: 50px; 
 
    width: 100px; 
 
    position: fixed; 
 
    bottom: 0; 
 
    background: blue; 
 
}

<div id="container"> 
 
    <div id="footer"></div> 
 
</div> 
 
<div id="fixed"></div>

Answer 2

당신은 HTML에서 <footer> 사용하고 여백 탑 편집 할 수 있습니다 : 30 픽셀을; CSS로. 바닥 글 DIV, 비디오 등 : 왜 당신의 주요 사업부에`패딩 - bottom`를 추가하지
는 또한 바닥 글 안에 시간을 사용할 수 있으며 심지어 더 좋은

<footer> <hr> &copy; this is footer <footer>