2013-10-05 2 views
0

Я создаю поле honeypot в форме, представленной на уровне домашней страницы сайта. Поля идут:Honeypot Positioning

honeypot 
email 
name 
text area for comment 

приманка не должна показывать для реальных пользователей, но должны быть доступны для ботов, чтобы заполнить. Я использовал CSS, как это:

.honey{ 
    position: absolute; 
    left: -999em; 
    } 

позиционировать приманку:

<input class="honey" type="text" placeholder="your email" /> 

Это не работает. Элемент ввода остается плотно там, где он был. Я проверил, чтобы CSS был последним загруженным, соблюдая правило близости и что нет ничего более конкретного и не вижу никакого переопределения.

Есть ли какая-то магия, которую я не получаю?

Благодаря

+0

работает для меня: http://jsfiddle.net/74TW6/. –

+0

Это именно то, что я сделал, а потому, что он находится внутри набора плавающих 'div' Я считаю, что он не хочет двигаться. –

+0

На самом деле это не ответ на ваш вопрос CSS ... но я думаю, что ваш подход не самый лучший с моей точки зрения. Дисплей CSS для некоторых ботов может быть достаточным, но удаление элемента из DOM с помощью JS является лучшим потому что боты обычно не позволяют JS. Этот пакет https://packagist.org/packages/dominiquevienne/honeypot - это полное бесплатное решение для предотвращения форм от спама без каких-либо ошибок ... Не стесняйтесь протестировать: он быстро устанавливается, прост и эффективен. –

ответ

1

Если <input> находится внутри другого элемента (как <div>), который имеет position: relative; набор, вход будет позиционироваться абсолютно, но по отношению к этому элементу.

Переключитесь на position: fixed;, потому что это относительно видимой площади экрана.

Reference

+0

Итак, вы говорите, что включите «div» в 'position: fixed', и это должно решить проблему? Мне интересно, можно ли использовать только небольшой Javascript здесь ниже. –

+0

Нет, просто измените '.honey' на' position: fixed; '. И добавьте 'top: -999em; ' пока вы на нем. – Deryck