Question

我在第I页的工作中定位这两个按钮时遇到问题。我尝试在点击时缩小图片链接。看起来绝对定位并不能完成它的工作。

Page：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;

图像定位不起作用

1 个答案: