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;
    }

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

2 个答案: