/

HTML / CSS / JavaScript Tutorial

CSS Property: position

[this page | pdf | back links]

The CSS (CSS2) position property indicates how an element should be positioned.

 

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

 

Value

Description

absolute

The element is positioned relative to its first positioned (i.e. not static) ancestor

fixed

The element is positioned in a fixed position relative to the browser window

relative

The element is positioned relative to its normal position

static

(default value). The element is positioned (relative to others) in the order in which it appears in the document flow

 

Default Value:

static

JavaScript syntax:

e.g. object.style.position="fixed"

Inherited:

No

Animatable:

No

 

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; bottom: 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.bottom = "5px";
</script

</body>
</html>

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


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile