Firefox Tomorrow

web api interface

CSSPositionValue

View on MDN ↗

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

Constructor

Instance properties

  • x Deprecated
    • : Returns the item’s position along the web page’s horizontal axis.
  • y Deprecated
    • : 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="/firefox/mdn-assets/api/csspositionvalue/mdn.svg" alt="MDN Logo" />
Interactive exampleOpen the canonical MDN source to run this embedded demo.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also