고정 된 요소가 겹치는 스크롤 막대를 방지합니다.

Question

오른쪽 아래 모서리에 "문의하기"탭을 추가하려는 사이트가 있습니다. 내 상상의 Here is a fiddle. 분홍색 연락처 탭이 스크롤 막대 위에 있습니다. 나는 그것이 스크롤바의 왼쪽에있는 것이 좋을 것이다.

아래 오른쪽에 탭을 넣으려면 position:fixed을 사용하고 있지만 스크롤 막대와 겹칩니다. right:0을 다른 것으로 바꿀 수는 있지만, 스크롤바 너비가 브라우저마다 다르므로 어떤 값을 선택해야할지 모르겠다.

저는 인터넷 검색을하고 혼란스럽고 복잡한 답변을 찾았습니다. 그러나 해결하려는 내용을 실제로 처리하지 못했습니다.

요소를 고정하고 스크롤 막대와 겹치지 않게 배치하는 방법은 무엇입니까? 당신이 탭 아래에있는 스크롤 막대를 원하는 경우

Answer 1

, 당신은 사용할 수 있습니다

Fiddle 당신이 찾고 있던 무엇인가요 :

여기

z-index : 'number value'; 

이 바이올린의 업데이트 된 버전인가? 또는 스크롤 막대에서 요소를 완전히 이동하려고하면 페이지면이 떠있게됩니다. 스크롤바에 '반응이 있습니까?' @chazsolo가 언급 한 것처럼 스크롤 막대의 동적 크기의 뉘앙스를 다루는 것보다는 왼쪽으로 디자인을 변경하는 것이 더 쉬울 것입니다.

 

    ::-webkit-scrollbar { 
    display: none; 
    } 

그런 식으로 사람들은 여전히 ​​스크롤 할 수 있지만, 여전히 매우 사용하기 쉬운 아니다 만 웹킷 브라우저에서 작동 :

Answer 2

당신은 사용하여 스크롤 막대를 숨길 수 있습니다. 나는 당신이 가고있는 것이 약간의 패배의 전투라고 생각합니다. 나는 그것을 바닥에 대고 플러시하고 사이트의 나머지 내용과 똑같은 오른쪽 여백을 주겠다. 그런 다음 그것을 엉망으로 만들 필요가 없으며 여전히 좋아 보인다. 사파리와 같은

브라우저는 완전히 모든 브라우저를 조정하고자하지 않는, 그래서 내가 그 위의 댓글에서 언급 한 동안 당신이 적극적으로 ... 참으로 더 감사합니다 :)

Answer 3

스크롤하지하지 않는 한 스크롤 막대를 숨기

1#workspace

2 변경에서 position: absolute;를 제거 : 나는-다시 생각 제안 페이지 구조를 거라고, 나는 "빠른 수정"당신은 이후있어 믿을3210 #workspace에 margin-top: 30px;에

3.는 부여하여 #content-header 상기 나머지 (예를 들어 2)

#content-header { 
    ... 
    z-index: 2; 
} 

#workspace { 
    //top: 30px;   -- REMOVE THIS 
    //position: absolute; -- REMOVE THIS 
    margin-top: 30px; 
} 

JSFiddle