# CSS: “position”: X is not a “position” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-position-x-is-not-a-position-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

```html
<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>
```