按钮在我的页面的顶部角落

Question

我有一个随机按钮(输入)在我的页面左上角，你能告诉我如何解决这个问题吗?

图片:http://d.pr/h8An

下面是我的代码:

        <img class="iphone" src="img/iphone.png" />
        <img class="sp_title" src="img/sp_title.png" />
        <img class="sp_detail" src="img/sp_detail.png" />
        <img class="sp_emailText" src="img/emailtext.png" />    
        <img class="sp_emailField" src="img/sp_emailField.png" />
        <form action="" method="POST">
            <input type="text" class="emailField" placeholder="" name="email" />
            <button type="submit">
                 <div class="submit" />
            </button>
        </form> 
</body>
.iphone {
    top: 50px;
    left: 100px;
    position: absolute;
}
.sp_title {
    top:150px;
    right: 350px;
    position: absolute;
}
.sp_detail {
    top: 250px;
    right: 275px;
    position: absolute;
}
.sp_emailText {
    top:350px;
    right:295px;
    position: absolute;
}
.sp_emailField {
    top:400px;
    right:275px;
    position:absolute;
    background-image: url("../img/sp_emailField.png");
}
.emailField {
    top:413px;
    right:290px;
    width: 355px;
    height: 30px;
    position: absolute;
    border: none;
    font-size: 17;
    text-align: center;
    color: #AE5532;
}
.submit {
    bottom: 100px;
    right: 400px; 
    width: 135px;
    height: 47px;
    position: absolute;
    background-image: url("../img/submitBtn.png");
}
.submit:hover {
    background-image: url("../img/submitBtnhover.png");
}
.return {
    top: 465px;
    right: 365px;
    position: absolute;
    color: white;
    font-family: "Helvetica";
}

Answer 1

按钮在你的代码中。

<button type="submit">
     <div class="submit" />
</button>

所以它真的不是随机的。

如果你不希望它在那里，从你的代码中删除它。

编辑:如果你说的是那个元素的定位，那是因为你改变的是<div>而不是<button>的位置。如果你的浏览器的调试工具支持它，检查<div>，你会看到它的位置正确。请记住，当您为元素指定绝对位置时，您将从文档流中删除该元素，就像使用浮点数一样。父元素将而不是调整大小或移动以适应您。

Answer 2

混合绝对定位和静态定位是相当棘手的，因为绝对定位的元素是从文档流中删除的-本网页提供了一个可以理解的概述，并举例说明了不同的定位方法及其影响-效果和副作用。

如果你没有看到你需要什么，那么给出一个正确的解决方案是不容易的，但是解决这个问题的最简单的方法——假设没有办法摆脱绝对定位——就是用一个绝对定位的div来包装表单，并且完全避免页面上的静态定位元素

Answer 3

只需将按钮位置设置为绝对位置并将其停靠在顶部，如下所示:

input[type="button"] {
    position: absolute;
    top: 0;
}

你知道了…