HTML Guides for position

The position property accepts only the keywords static, relative, absolute, fixed and sticky, written without quotes, so a quoted value such as "absolute" is rejected.

Quotation marks turn a CSS value into a string. "absolute" is a string that contains the word absolute, not the absolute keyword, and position has no string values. Quoted keywords usually come from a template or script that writes the CSS and wraps every value in quotes, the way JavaScript and JSON write strings. The validator reports any other value it doesn't recognize in the same way, such as the typo absolut or center borrowed from another property.

Browsers drop a declaration whose value they can't parse. The element keeps the position it would otherwise have, usually static, and top, right, bottom and left have no effect on it. A badge meant to sit in the corner of a card stays in the normal flow instead. If only the parent's position: "relative" is quoted, its absolutely positioned children are placed against the nearest positioned ancestor further up the page, or the page itself, rather than the parent.

Remove the quotes so the value is the bare keyword. The global keywords inherit, initial, unset and revert also work, and they don't take quotes either. When a template or script generates the CSS, fix the code that writes it, since a hand edit to the output won't survive the next build.

Invalid example

<style>

.card {

position: "relative";

}

.card-badge {

position: "absolute";

top: 0;

right: 0;

}

</style>

<div class="card">

<img src="shoe.jpg" alt="Trail running shoe">

<span class="card-badge">New</span>

</div>

Valid example

<style>

.card {

position: relative;

}

.card-badge {

position: absolute;

top: 0;

right: 0;

}

</style>

<div class="card">

<img src="shoe.jpg" alt="Trail running shoe">

<span class="card-badge">New</span>

</div>