Question

我的页面左上角有一个随机按钮（输入），你能告诉我如何解决这个问题吗？！

这是我的代码：

        <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

混合绝对定位和静态定位非常棘手，因为从文档流中删除了绝对定位的元素 - this webpage提供了一个可理解的概述，其中包含不同定位方法及其影响效果和副作用的示例。 / p>

如果没有看到你需要的大图，那么提供正确的解决方案并不容易，但可能是解决问题的最简单方法 - 假设没有解决方案来摆脱绝对定位 - 就是将表格包装成一个div绝对定位，完全避免页面上静态定位的元素。

Answer 2

该按钮位于您的代码中。

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

所以它真的不是随机的。

如果您不想在那里，请将其从代码中删除。

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

Answer 3

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

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

你有它..希望这有帮助！

我页面顶角的按钮？

3 个答案: