Francis Nepomuceno
Francis Nepomuceno

Reputation: 5085

Dev Tools, Inspect Element, why is my CSS unchecked?

On a freshly loaded site, when I go inspect an element, a CSS property is always unchecked. It's there and I can enable it, but it's unchecked by default.

The style is position: sticky

Tried this in different browsers:
* Chrome and Firefox: it's unchecked, but I can toggle it
* Safari: it's "commented out" and also I can toggle it

To be clear: I don't see any other position styles being applied on that same element.

Any ideas?

Upvotes: 0

Views: 395

Answers (2)

Francis Nepomuceno
Francis Nepomuceno

Reputation: 5085

Figured it out - the style was actually commented out in code.

What surprised my was Dev Tools picking up commented out styles and listing it.

Updated: as @sebastian-zartner pointed out, these commented out styles will always be displayed

Upvotes: 3

Hassan Dallal
Hassan Dallal

Reputation: 17

An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

Safari requires a -webkit- prefix

Upvotes: 0

Related Questions