Honeypot Positioning

Question

I'm creating a honeypot field in a form exposed at the home page level of a site. The fields go:

honeypot
email
name
text area for comment

The honeypot is not supposed to show for real users, but should be available for bots to fill out. I used CSS like this:

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

to position the honeypot:

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

This isn't working. The input element stays firmly where it was. I've checked to make sure the CSS is the last one loaded, observing the proximity rule and that there is nothing more specific, and can't see any override.

Is there some magic I'm not getting?

Thanks

Answer 1

If your <input> is inside of another element (like a <div>) that has position: relative; set, the input will be positioned absolutely but in relation to that element.

Switch to position: fixed; because that's relative to viewable screen area.

Reference