CSS를 사용하여 앵커 된 단추 위에서 텍스트 스크롤 방지하기

Question

페이지의 왼쪽 하단에 고정되어있는 단추가 있습니다. 그 위에 너무 많은 내용이있을 경우 스크롤하지 않고도 항상 액세스 할 수 있기를 원합니다. 이것은 내가 이러한 목표를 달성하기 위해 현재 가지고있는 CSS입니다 :

이제

.add-button { 
    font-size: 18px; 
    background-color: #cfcfcf; 
    padding: 10px 45px; 
    position: absolute; 
    left: 20px; 
    bottom: 20px; 
} 

나는 내용이 버튼을 "뒤에"스크롤되지 않는, 스크롤 내용이 있다면, 그래서 그것을 만들 좋아하지만 사라 것 버튼 바로 위에있는 곳을 봅니다. 그건 그렇고, 포함 div는 "사이드 패널"이라는 제목입니다. CSS로 어떻게이 작업을 수행 할 수 있습니까?

Answer 1

바닥 글에서 전체 브라우저 너비에 걸쳐 (텍스트의 본문 배경과 동일한 배경색을 가진) 고정 위치 컨테이너를 사용해야하며 그 안에 버튼을 넣어야합니다. 그런 다음 자연스럽게 콘텐츠가 스크롤됩니다. '버튼 위의 일부 위치에서 사라지는'내용은 컨테이너의 패딩 (또는 패딩 윗부분)을 조정하여 수행 할 수 있습니다.

#footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    padding: 10px; 
 
    background-color: #fff; 
 
}

<div id='wrapper'> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus facilisis molestie. Cras vulputate velit in nulla gravida, malesuada ultrices quam tempor. Vestibulum dapibus sapien lectus, quis sollicitudin neque scelerisque et. Vivamus faucibus sem eget libero volutpat, et tincidunt purus lobortis. Duis volutpat diam risus, sed molestie tortor viverra id. Vestibulum nec eros et est hendrerit finibus. Aliquam erat volutpat. Cras massa erat, semper sed pharetra nec, tempus sed felis.</p> 
 
<p>Pellentesque odio quam, tincidunt dictum metus sit amet, sollicitudin pretium ligula. Etiam mollis orci quis massa vestibulum, vitae elementum urna dapibus. Nulla facilisi. Cras quis enim sit amet leo condimentum porttitor id non tortor. Phasellus sapien lorem, rhoncus eu nisi feugiat, vestibulum imperdiet risus. In dictum ligula est, vel porttitor lectus ultrices eu. Etiam aliquet ante molestie, sodales mauris eget, finibus velit. Maecenas feugiat nisl libero, in lacinia elit ornare ac.</p> 
 
<p>Maecenas id dignissim mauris, eget elementum massa. Morbi in dictum libero. Integer euismod tortor non arcu cursus laoreet. Aenean eleifend mi metus, eget semper nunc euismod luctus. Mauris venenatis volutpat mauris ut porta. Maecenas felis risus, consequat iaculis ipsum varius, tempus semper magna. Vestibulum vitae nisi nibh. Nam in tortor quis lacus tristique porta ac at risus. Praesent convallis, felis eget imperdiet porta, arcu sem facilisis elit, quis posuere lacus turpis quis ex. Etiam finibus lorem commodo nunc ultrices egestas. Etiam tempus volutpat bibendum. Vivamus ornare, odio vitae pharetra fringilla, turpis arcu luctus velit, a posuere lectus lacus id purus. Nam in malesuada tortor. Nunc pulvinar venenatis urna, in finibus nisi dapibus quis.</p> 
 
<p>Donec cursus risus non augue rutrum, at venenatis augue tincidunt. Phasellus interdum elementum quam, quis laoreet enim blandit sed. Mauris ut est non lectus mollis egestas a vitae purus. Nunc porta dui massa, eget tempor quam venenatis vel. Donec dignissim sollicitudin massa, ac convallis nisl dictum sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent non dui ullamcorper, rutrum lectus in, euismod mauris. Curabitur imperdiet ut magna nec pretium.</p> 
 
<p>Nunc vitae congue nunc. Aenean eget justo ante. Suspendisse nec molestie orci. Suspendisse ac consequat orci, in consequat risus. Vestibulum volutpat, erat ut egestas scelerisque, sapien diam mattis mauris, malesuada facilisis elit dui in urna. Aliquam erat volutpat. Aliquam erat volutpat. Maecenas venenatis tincidunt massa at imperdiet. Praesent auctor euismod purus, id iaculis sem placerat vitae. Aliquam erat volutpat.</p> 
 
    <div id='footer'> 
 
    <button id='button' value='Foo'>Foo!</button> 
 
    </div> 
 
</div>