图像定位不起作用答案

【问题标题】：Image positioning is not working图像定位不起作用
【发布时间】：2014-03-27 02:06:30
【问题描述】：

我在正在处理的页面上定位这两个按钮时遇到问题。我试图在点击时缩小图片链接。看起来绝对定位不起作用。

页面：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;
}

【问题讨论】：

不知道你想要达到什么目的......另外，图像在更高的屏幕分辨率上看起来很糟糕......
我还没有得到最终的图像喷射。这些只是使页面正常工作的一些草稿。我正在尝试使链接图像在点击时变小。现在它们彼此加倍。
-position: absolute; -left: 0px;?为什么那里有破折号？
@bjb568 这似乎是答案，你应该把它作为一个发布！

标签： css image replace hyperlink absolute

【解决方案1】：

你有：

-position: absolute;
-left: 0px;

可能是供应商前缀的拼写错误。这将导致属性未知，因此不会被渲染。你应该写：

position: absolute;
left: 0px;

【讨论】：