끈적한 바닥 글이 거의 작동합니다.

Question

저는이 블로그 게시물을 사용했습니다. 내 웹 사이트에 끈적 거리는 (고정되지 않은) 바닥 글을 넣으려는 의견이 있습니다.

호버에 이미지를 표시하려면이 블로그 게시물 (설명 참조)을 사용할 때까지 웹 사이트의 모든 곳에서 작동했습니다. 이제 바닥 글은 페이지 아래쪽에 있지만 이미지 위로 마우스를 올리면 스타일이 지정된 페이지에만 표시됩니다. Here은 깨진 페이지이며 here은 작동중인 페이지입니다.

Chrome 개발자 도구에서 제거 할 때 페이지가 확대 된 호버 이미지가 나타나기는하지만 (바닥 글이 제자리로 돌아 오기 때문에) 분명히 ul.enlarge span의 스타일과 관련이 있습니다. 내가 원하는 것).

내 꼬리말이 페이지 아래쪽에 머물러 있어도 (내용이 맨 아래까지 계속되는 경우에도) 바닥에 닿아도 이미지가 확대됩니다. 그 페이지의 맨 아래에 거대한 빈 갭을 일으키는 것은 무엇입니까 ?? 깨진 페이지 전체 크기의 갤러리 이미지 공간을 복용 (멀리보기 창에서 왼쪽 알 수 없음) 때문에

Answer 1

그것은 당신이

ul.enlarge span { 
    left: -9999px; 
    position: absolute; 
} 

에서 해당 이미지를 포함하는 요소의 position 변경하여 바닥 글을 고칠 수 있어요

ul.enlarge span { 
    left: -9999px; 
    position: fixed; 
} 

에 position: fixed;로 '숨겨진'동안 그래서 그 이미지는 늘 브라우저 창을 기준으로 요소를 배치하는 페이지의 나머지 부분을 방해

당신은 너무 u'll 백그라운드에서 무슨 일이 일어나고 있는지 알 방법도 확인하실 수 있습니다 이유는 0에 left 값을 변경을 통해 생겼습니다

편집 : 코멘트에 제안한 것처럼, 당신은 또한 갤러리를 고정하여 페이지를 고칠 수 , http://cbracco.me/css-sticky-footer-effect/ 이미지를 블로그 게시물을 확대 : 그

ul.enlarge span { 
    display: none; 
} 
ul.enlarge li:hover span { 
    display: block; 
    position: absolute; 
    left: -20px; 
    top: -300px; 
} 

같은 을 스타일링하는 것은 그래서 미래