CSS 꼬리말이 스크롤하지 못하도록

#bottom_fade { 
      position: absolute; 
      bottom: 0; 
      width: 100%; 
      background: url("bottom-fade.png"); 
      background-repeat:repeat-x; 
      height: 400px; 
      z-index: 2; 
      } 
     .categories { 
      position: absolute; 
      left: 50%; 
      color:black; 
      word-wrap: break-word; 
      font-family: 15px 'Libre Baskerville', serif; 
      margin-left: -200px; 
      z-index: 1; 
      } 
     .categories td { 
      width: 200px; 
      }

위의 코드 here의 결과가 표시 될 수 있습니다. 브라우저 창 크기를 조정하면 스크롤하여 테이블의 전체 텍스트를 볼 수 있습니다.CSS 꼬리말이 스크롤하지 못하도록

스크롤 할 때 #bottom_fade은 페이지 하단에 붙어 있지 않지만 스크롤을 따라갑니다. 나는 그 일이 일어나기를 원하지 않습니다 : 어떻게 bottom_fade가 스크롤바에 무슨 일이 생기더라도 항상 브라우저 윈도우의 하단에 붙어있는 상태로 유지할 수 있습니까?

감사합니다.

출처

2013-02-13 Saturnix

이 관련되지 않은하지만 당신은'포인터 이벤트를 설정하는 것이 좋습니다 : 바닥 글에 none', 그것은 텍스트를 선택 중단을 참조하십시오 ([요소를 기본에 DIV를 클릭하세요] http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements) – MikeM

오! 고마워, 젠장, 그 생각조차하지 않았다. 나는 그것을 추가 할 것이다! – Saturnix

가 마법처럼 작동합니다

#bottom_fade { 
     position: absolute; 
}

#bottom_fade { 
     position: fixed; 
};

및

로 변경합니다.

(그런데 좋은 효과!)

출처

2013-02-13 21:10:37 Pbirkoff

+1 그리고 답에 감사드립니다. 그러나 이제는 솔루션에서 스크롤바가 나타나지 않습니다 (Safari를 사용하고 있습니다). 효과를 유지하면서 테이블을 스크롤 할 수있는 방법이 있습니까? 나는 이것을 많은 웹 사이트에서 보았습니다 ... – Saturnix

흠, 이상하게 보입니다. Firefox에서 작동하는 것 같습니다. 고정 된 요소를 올바른 요소에 놓았습니까? (귀하의 사이트에서 나는 # 카테고리의 위치를 고정 된 것으로 보았습니다 ...) – Pbirkoff

나는 바보입니다. 나는 틀린 선택자를 바꾸고 있었다, 그것은 지금 잘 작동한다. 고마워! – Saturnix

CSS 꼬리말이 스크롤하지 못하도록

답변

관련 문제