position Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:position

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. position

Description

The position property sets or gets the type of positioning method as:

  • static
  • relative
  • absolute
  • fixed

Property Values

ValueDescription
static Elements renders in order, as they appear in the document flow. This is default.
absolute positioned relative to its first positioned not static ancestor element
fixedpositioned relative to the browser window
relative positioned relative to its normal position
sticky positioned based on the user's scroll position.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: static
Return Value: A String, representing the position type of an element
CSS VersionCSS2

Change the position of a <div> element from absolute to relative

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<h2 id="myH2" style="position:absolute;left:100px;top:150px;">This is a heading</h2>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {//w  w w.  j av  a  2  s.c  o m
    document.getElementById("myH2").style.position = 'relative';
}
</script>

</body>
</html>

Related Tutorials