CSSPositionValue

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

The CSSPositionValue interface of the CSS Typed Object Model API represents values for properties that take a position, for example object-position.

Constructor

CSSPositionValue(): Creates a new CSSPositionValue object.

Instance properties

CSSPositionValue.x: Returns the item's position along the web page's horizontal axis.
CSSPositionValue.y: Returns the item's position along the vertical axis.

Instance methods

None.

Examples

The following example positions a container <div> 5 pixels from the top and 10 pixels from the left of the page.

const replacedEl = document.getElementById("image");
const position = new CSSPositionValue(CSS.px(35), CSS.px(40));

replacedEl.attributeStyleMap.set("object-position", position);
console.log(position.x.value, position.y.value);
console.log(replacedEl.computedStyleMap().get("object-position"));

We set the object-position property, then check the values returned.

#image {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: #dededf;
  object-fit: none;
}

<p>
  Check the developer tools to see the log in the console and to inspect the
  style attribute on the image.
</p>
<img id="image" src="mdn.svg" alt="MDN Logo" />

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`CSSPositionValue` Deprecated Non-standard	Chrome – Full support Chrome 66 (Release date: 2018-04-17) footnote Full support	Edge – Full support Edge 79 (Release date: 2020-01-15) footnote Full support	Firefox – No support Firefox footnote No support	Opera – Full support Opera 53 (Release date: 2018-05-10) footnote Full support	Safari – No support Safari footnote No support	Chrome Android – Full support Chrome Android 66 (Release date: 2018-04-17) footnote Full support	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – Full support Opera Android 47 (Release date: 2018-07-23) footnote Full support	Safari on iOS – No support Safari on iOS footnote No support	Samsung Internet – Full support Samsung Internet 9 (Release date: 2018-09-15) footnote Full support	WebView Android – Full support WebView Android 66 (Release date: 2018-04-17) footnote Full support	WebView on iOS – No support WebView on iOS footnote No support
`CSSPositionValue()` constructor Deprecated Non-standard	Chrome – Full support Chrome 66 (Release date: 2018-04-17) footnote Full support	Edge – Full support Edge 79 (Release date: 2020-01-15) footnote Full support	Firefox – No support Firefox footnote No support	Opera – Full support Opera 53 (Release date: 2018-05-10) footnote Full support	Safari – No support Safari footnote No support	Chrome Android – Full support Chrome Android 66 (Release date: 2018-04-17) footnote Full support	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – Full support Opera Android 47 (Release date: 2018-07-23) footnote Full support	Safari on iOS – No support Safari on iOS footnote No support	Samsung Internet – Full support Samsung Internet 9 (Release date: 2018-09-15) footnote Full support	WebView Android – Full support WebView Android 66 (Release date: 2018-04-17) footnote Full support	WebView on iOS – No support WebView on iOS footnote No support
`x` Deprecated Non-standard	Chrome – Full support Chrome 66 (Release date: 2018-04-17) footnote Full support	Edge – Full support Edge 79 (Release date: 2020-01-15) footnote Full support	Firefox – No support Firefox footnote No support	Opera – Full support Opera 53 (Release date: 2018-05-10) footnote Full support	Safari – No support Safari footnote No support	Chrome Android – Full support Chrome Android 66 (Release date: 2018-04-17) footnote Full support	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – Full support Opera Android 47 (Release date: 2018-07-23) footnote Full support	Safari on iOS – No support Safari on iOS footnote No support	Samsung Internet – Full support Samsung Internet 9 (Release date: 2018-09-15) footnote Full support	WebView Android – Full support WebView Android 66 (Release date: 2018-04-17) footnote Full support	WebView on iOS – No support WebView on iOS footnote No support
`y` Deprecated Non-standard	Chrome – Full support Chrome 66 (Release date: 2018-04-17) footnote Full support	Edge – Full support Edge 79 (Release date: 2020-01-15) footnote Full support	Firefox – No support Firefox footnote No support	Opera – Full support Opera 53 (Release date: 2018-05-10) footnote Full support	Safari – No support Safari footnote No support	Chrome Android – Full support Chrome Android 66 (Release date: 2018-04-17) footnote Full support	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – Full support Opera Android 47 (Release date: 2018-07-23) footnote Full support	Safari on iOS – No support Safari on iOS footnote No support	Samsung Internet – Full support Samsung Internet 9 (Release date: 2018-09-15) footnote Full support	WebView Android – Full support WebView Android 66 (Release date: 2018-04-17) footnote Full support	WebView on iOS – No support WebView on iOS footnote No support

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support
: Non-standard. Check cross-browser support before using.
: Deprecated. Not for use in new websites.