이미지 위치가 작동하지 않습니다.

Question

작업중인 페이지에이 두 버튼을 배치하는 데 문제가 있습니다. 클릭 할 때 이미지 링크를 작게하려고합니다. 절대 위치와 같은 것은 그것이 일이나 무언가를하지 않는 것처럼 보입니다.

페이지 : http://osuuskuntainfo.orgfree.com/saannot.html

<div id="yläreuna"> 

    <div id="etusivullenappi"> 

     <img class="bottom" src="/images/etusivullenappix.png" width="100%" /> 
     <a href="http://osuuskuntainfo.orgfree.com/index.html"><img class="top" src="/images/etusivullenappi.png" width="100%" /></a> 

    </div> 

    <div id="otsikko"><img src="images/säännöt otsikko.jpg" width="81%" alt="osuuskunnan säännöt" /></div> 

    <div id="pelisäännötnappi"> 

     <img class="bottom" src="/images/pelisäännötnappix.png" width="100%" /> 
     <a href="#pelisäännöt"><img class="top" src="/images/pelisäännötnappi.png" width="100%" /></a> 

    </div> 

</div> 

CSS :

#yläreuna { 
    float: left; 
    margin-left: 0px; 
    width: 100%; 
    margin-bottom: 18px; 
} 

#etusivullenappi { 
    position: relative; 
    width: 13%; 
    float: left; 
    margin-top: 42px; 
    margin-left: 4%; 
    padding-right: 8%; 
} 

#etusivullenappi img { 
    -position: absolute; 
    -left: 0px; 
    -webkit-transition: opacity 0s ease-in-out; 
    -moz-transition: opacity 0s ease-in-out; 
    -o-transition: opacity 0s ease-in-out; 
    transition: opacity 0s ease-in-out; 
    top: 0px; 
} 

#etusivullenappi img.top:active { 
    opacity:0; 
} 

Answer 1

당신이 가지고 : 공급 업체 접두사에서

-position: absolute; 
-left: 0px; 

아마도 오타. 속성이 알려지지 않아 렌더링되지 않습니다. 다음과 같이 작성하십시오 :

position: absolute; 
left: 0px;