2014-09-20 18 views
1

저는 웹 사이트에서 일하고 있습니다 - 내 포트폴리오. 메인 페이지에는 이미지 격자가 있습니다. 각 이미지는 해당 프로젝트의 페이지에 대한 링크입니다.플로팅 요소 아래에 절대 div 표시

이제 내 문제는 마우스를 움직이는 설명 텍스트입니다. 짧은 설명은 사용자가 이미지 위에 놓을 때 이미지 아래에 표시하고 싶습니다.

JSFiddle : http://jsfiddle.net/6crL7df7/

오전 데 문제는 내가 설명은 이미지 아래에 직접 표시 얻을 수있는 방법이다. 프로토 타입에서는 수동으로 bottom: -50px;을 설정했지만 다른 양의 텍스트에 맞게 조정해야합니다. div의 상단은 (는) 하단의 이미지 하단과 자동 정렬됩니다. bottom: 0;이 작동한다는 답변을 보았지만 나에게 도움이되지 못했습니다.

이미지 자체는 float: left;이고 설명은 position: absolute;입니다. 둘 다 포함하는 div는 float: left;position: relative;입니다.

이 기능을 사용하기 위해 기꺼이 제안을 드리겠습니다. W3C에서

답변

2

규격 :

bottom은 박스의 아래쪽 여백 모서리 위 상자의 함유 블록의 바닥 오프셋되는 정도를 지정.

top 속성은 절대적으로 배치 된 상자의 위쪽 여백 가장자리가 상자를 포함하는 블록의 위쪽 가장자리 아래에서 얼마나 멀리 오프셋되는지 지정합니다. 대신 bottom

, 값과 같거나보다 큰 100%으로 top 속성을 사용한다.

Updated Demo

div.description { 
    /* other declarations... */ 
    position: absolute; 
    top: 110%; /* Anything >= 100% */ 
} 
+0

흠, 어쩌면 사양을 읽었어야했는데 ... 쉬웠다. 'top : 100 %'내가 필요한 것을 정확하게 수행한다. – baum

1

나는 당신의 CSS 규칙에 다음과 같은 조정을 할 것 :

div.description { 
    color: black; 
    background-color: white; 
    font-size: small; 

    padding: 5px; 
    border: 1px solid black; 
    border-radius: 0 0 5px 5px; 

    position: absolute; 
    top: 100%; /* set top to be bottom edge of parent block */ 
    margin-top: -5px; /* adjust as needed */ 
    z-index: 1; 

    visibility: hidden; 

} 

Specity top 부모 블록의 아래쪽 가장자리 아래에 설명 블록의 위치를 ​​오프셋 (offset) , 그런 다음 margin-top을 사용하여 공백을 제어하십시오 (음수 여백 필요).

이것은 이전에 게시 된 솔루션과 본질적으로 같습니다.