화면 높이/너비에 관계없이 화면 하단에 이미지를 유지하려면 어떻게합니까?

Question

화면의 오른쪽 하단에있는 텍스트를 롤오버 할 때 이미지를 표시하려고합니다. 모든 화면 너비와 높이에서 어떻게 내려야합니까?

Answer 1

이 작동합니다 :

<style type="text/css"> 
    img.floating { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
} 
</style> 
<img class="floating" src="url to image" /> 

Answer 2

당신이 이미지에 고정 된 위치를 사용하여 지정할 수 있습니다 왼쪽, 상단 오른쪽 또는 하단은 사용자의 요구에 맞게 속성은 다음을 참조하십시오 http://www.w3schools.com/css/css_positioning.asp 예는

Answer 3

만들기 CSS 스타일 : 텍스트 위에 마우스를 올려 놓습니다.

<style type="text/css"> 
#bottom { display:none; } 
#text:hover #bottom { 
display:block; 
position:absolute; 
left:0; // how far from the left 
bottom:0; 
} 
</style> 
<div id="text>TEXT</div> 
<img src="bottomimage.jpg" id="bottom"> 

Answer 4

:hover 링크에서 사용하지 않는 한 IE6에서는 작동하지 않습니다. 이것을 사용하십시오.

<style type="text/css"> 
    #myFavoriteFooterImage { 
    bottom:0px; 
    right:0px; 
    position:fixed; 
    display:none; 
    } 
</style> 
<script type="javascript"> 
    document.getElementById("mousyTextFunTime").onmouseover = function(){ 
     document.getElementById("myFavoriteFooterImage").style.display = ""; 
    }; 
    document.getElementById("mousyTextFunTime").onmouseout = function(){ 
     document.getElementById("myFavoriteFooterImage").style.display = "none"; 
    }; 
</script> 

<div id="mousyTextFunTime">Text to mouse over</div> 
<img id="myFavoriteFooterImage" />