Кнопка в верхнем углу моей страницы?

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

Просто установите абсолютное положение кнопки и закрепите ее сверху, как показано ниже:

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

Вот оно ... Надеюсь, это поможет!

Answer 3

Смешивать абсолютное позиционирование и статическое позиционирование довольно сложно, потому что абсолютно позиционированные элементы удаляются из потока документов - эта веб-страница дает понятный обзор с примерами различных методов позиционирования и их влияния - эффекты и побочные эффекты.эффекты.

Не видя общей картины того, что вам нужно, найти правильное решение нелегко, но, вероятно, самый простой способ решить проблему - при условии, что нет способа избавиться от абсолютного позиционирования - этооберните форму в абсолютно позиционированный элемент div и полностью избегайте статически расположенных элементов на странице.