/

HTML / CSS / JavaScript Tutorial

CSS Property: right

[this page | pdf | back links]

The CSS (CSS2) right property sets, for absolutely positioned elements, the right edge of an element relative to the corresponding edge of its nearest positioned ancestor. If such an element has no positioned ancestors then it uses the document body and moves along with page scrolling. A ‘positioned’ element is one whose position is anything other than static.

 

Valid property values (other than inherit and initial) are:

 

Value

Description

length

Sets edge position as a CSS length. Can be negative

%

Sets edge position in % of containing element. Can be negative

auto

(default value). Browser calculates edge position

 

Default Value:

auto

JavaScript syntax:

e.g. object.style.right="10px"

Inherited:

No

Animatable:

Yes

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div.parent {width: 250px; height: 80px; border: thin solid green; position: relative;}
div.x1 {width: 200px; height: 40px; border: thin solid red;}
div.x2 {width: 200px; height: 40px; border: thin solid red; position: absolute; right: 5px}
</style>
</head>
<body>
<div class="parent">
  <div class="x1">Element with default properties</div>
</div><br>
<div class="parent">
  <div class="x2">Element with CSS property set using HTML</div>
</div><br>
<div class="parent">
  <div id="x3">Element with CSS property set using JavaScript</div>
</div>

<script>
var x = document.getElementById("x3");
x.style.width = "200px";
x.style.height = "40px";
x.style.border = "thin solid red";
x.style.position = "absolute";
x.style.right = "5px";
</script

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyRight() {
  var x = document.createElement("DIV"); x.style.right = "5px"; return (window.getComputedStyle(x, null).right == "5px");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile