Checkbox hack - Is there a drawback to hiding a checkbox off-screen via position: absolute?

user_2991837 0
Viewed 234

This is the checkbox hack: https://css-tricks.com/the-checkbox-hack/

My question is why "hide" the checkbox by positioning it off the page, as shown in the example on CSS Tricks:

position: absolute;
top: -9999px;
left: -9999px;

Why not just do:

display: none;

The answer at How does css checkbox hack work? says:

"Hiding the checkbox through display:none could cause buggy behavior on certain browsers. Just hiding it from view by a position: absolute is safer."

Which browsers? And are there any drawbacks with using absolute position to place an element off the page? To be more specific, are there any drawbacks with using absolute position to place an input off the page?

css
1 Answers

There is no drawback to using absolute positioning. It just depends on what kind of space you are expecting that element to occupy. Absolute positioning is a good answer because it means the element is not effecting the layout of the page and the element remains in the DOM. "Visibility: hidden" or "opacity: 0" will also suffice. However, they will still take up space on the page. This is fine in the event that you are just going to absolutely position something over the top anyway. Display none prevents the element from reaching the DOM and thus the functionality will not be available.

user_101627850
Related