2012-11-08 3 views
0

브라우저 크기를 다시 조정해도 boxclosed1.png를 동일한 위치에 머물게 할 수 없습니다. 누구에게 아이디어가 있습니까? 나는 크롬에서 시험하고있다. CSS: position absolute fails in resizing이미지 위치가 작동하지 않습니다.

편집 : :이 링크에 게시 된 팔로우하려고 는 그래서 난 (등 잔디) 다른 모든 항목을 복용 시도하고 올바른 위치에있는 것 같다. 이 경우 div와 스타일의 현재 설정에 대해이 작업을 함께 변경하려면 무엇을 변경해야합니까?

코드 :

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3c.org/TR/xhtml11/DTD/xhtml11-strict.dtd"> 

<!-- START HTML --> 
<html> 

    <!-- START HEAD --> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <link rel="stylesheet" type="text/css" href="css/27.css" /> 

    <!-- END HEAD --> 
    </head> 

    <!-- START BODY --> 
    <body> 

     <div id="cont"> 
<a href="malmo/"><img class="animated bounceInDown" src="boxclosed1.png" alt="Malmö"></a> 
     </div> 

    <!-- END BODY --> 
    </body> 

<!-- END HTML --> 
</html> 
+0

jsfiddle이나 비슷한 것을 제공 할 수 있다면 (대개 이와 같은 사이트가 많기 때문에) 대개 이러한 상황에서 도움이됩니다. 그래서 어떤 것이 효과적인지 두 가지가 아닌지를 제공 할 수 있습니다 별도의 피들? – jcolebrand

답변

1

당신이 내부 position: absoluteboxclosed1.png을 배치하면 상대적 위치 절대적으로, 부모 관련을 위치하는 <div>, 다음 이미지가 될 것입니다 여전히 것 브라우저 크기가 조정되면 이동 ... 이미지도 마찬가지입니다.

합니다 (</body> 닫는 태그 전에) 모든 컨테이너에서 이미지를 이동하고 그것을 position: fixed을주고

.fixed { position: fixed; bottom: 20px; right: 20px; } 

확인 같은 bottom 및 페이지 right 관련하여 그 위치를 설정 (및 크기 조정)

fiddle

BTW, 나는 예상치 못한 크로스 브라우저의 결과를 피하기 위해 width 또는 height에게 html 태그도 위치를 설정하지 않을 (당신이하고있는 일을 정확하게 모른다면)

+0

아, 생명의 은인. 감사! – BlackSky

관련 문제