css - 图像定位不起作用

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;