css - HTML5 将图像放置在屏幕上我想要的位置

Question

我有一个小开始屏幕正在运行，我希望将充当按钮的图像放置在某个点，但是当我尝试它时它会停留在同一个地方，我不知道我怎么能得到它留在我想要的地方。这是我的代码，它是带有一些 CSS 的 HTML：

<style>
    #SplashScreen{
        position:relative;
        overflow:hidden;
    }

    #StartButton
    {
        cursor:pointer;
        position:absoloute;
        left:100px;
        top:100px;
    }
</style>
<div id="SplashScreen" width="400" height="400">
    <h1>Game Title</h1>
    <img id="StartButton" src="play.png"/>
</div>

图像只是在标题下方绘制，而不是在我想要的位置。有什么帮助吗？

Answer 1

那是因为你的absolute拼写错误

#StartButton
{
    cursor:pointer;
    position:absolute;
    left:100px;
    top:100px;
}

并且不要使用高度/宽度属性，#SplashScreen而是在My Fiddle中指定它们

<style>
    #SplashScreen{
        position:relative;
        overflow:hidden;
        height: 400px;
        width: 400px;

    }

    #StartButton
    {
        cursor:pointer;
        position:absolute;
        left:100px;
        top:100px;
    }
</style>
<div id="SplashScreen">
    <h1>Game Title</h1>
    <img id="StartButton" src="http://www.alfresco.com/community/images/windows-icon.png"/>
</div>​

Answer 2

试试这个，你拼错了absolute，如果你想为一个 div 设置宽度和高度，你必须通过 CSS 来完成，而不是在 html 标记中

#SplashScreen{
        position:relative;
        overflow: hidden;
        width: 400px;
        height: 400px;
    }

    #StartButton
    {
        cursor:pointer;
        position: absolute;
        left:200px;
        top:100px;
        width: 50px;
        height: 50px;
        background: black;
    }