Welcome Guest! (App Version 3.1)

websitnero logo name

Position

Position property is a very important property of HTML elements and is helpful in making layouts. By default the value of all the HTML elements is set to static. With the help of CSS we can change the value of this property to any of the following values -- relative, absolute or fixed.

While position: relative is helpful in fine-tuning the position of an element, position:absolute anchors itself to some parent element (having position as relative) and moves as per the distance defined from it. Position: fixed anchors the html element to the root of dom structure, ie, document root object. Therefore an element having position as fixed is anchored to the top-left of the screen and moves to a defined distance measuring from top-left of the screen.

Note: "To use Z-Index property of any element, the value of position has to be either relative, absolute or fixed. Z-Index does not work for elements having property: static."

static | relative | absolute | sticky | fixed

Position Static

Position: Static is the default value of position property for all elements in HTML. This simply means they will be placed into the normal flow of the elements in the web page.

Example

<div>
  <p>This is a paragraph.</p>
</div>

Position Relative

Position: Relative is basically used to fine-tune an element's position. For example: if an element seems to be slightly shifted to up or down then it can be moved a few pixels to align it with other elements. Thus, we get help of position: relative which allows us to move an element few pixels measuring from where it should have been in normal flow.

It is also used as an anchor to a child element if it has its property as position: absolute.

Example

<head>
<style>
div{
  height:100px;
  border:2px solid red;
  margin:40px;
}
p{
  position:relative;
  top:30px;
  left:30px;
  margin:0px;
}
</style>
</head>

<body> 
<div>
  <p class="p1">This is a paragraph.</p>
</div>
</body> 

Position Absolute

Position: absolute is used when a programmer wants to place an element which is tightly-coupled with some parent element and has to be placed at a certain distance measured from its parent eelment. For example: While making a drop-down menu the child list has to be exactly bottom or right of its parent <li> item.

An element with ,position: absolute does not affect the position of other elements on the HTML document. In some cases it might even overlap with other elements present on the page if not placed correctly.

The distance given to it will be measured from top-left corner of its anchor element (parent element with its property as position: relative).

Example

<head>
<style>
section{
  border:2px solid green;
  position:relative;
  height:200px;
}
div{
  height:100px;
  border:2px solid red;
  margin:40px;
}
p{
  position:absolute;
  top:30px;
  left:30px;
  margin:0px;
}
</style>
</head>

<body> 
<section>
  <div>
    <p>This is a paragraph. </p>
  </div>
</section>
</body> 

Position Fixed

Position: fixed is exactly similar to position: absolute with the only difference being that it sets the anchor of this element to be document-root-object. This means that the element, by default, will always be placed to the top-left corner of the user screen (if it has top:0px and left:0px).

If any top or left distance is given, the new position of the element will be calculated from the top-left corner of the screen and the element will be moved to the prescribed location and will stick to this place without effecting any flow of other elements.

Note: "Most common use of position: fixed is adding a square chat box to bottom-right of the screen which remains their as fixed even if user scrolls the page."

Example

<head>
<style>
section{
  border:2px solid green;
  position:relative;
  height:200px;
  margin:30px
}
div{
  height:100px;
  border:2px solid red;
  margin:40px;
}
p{
  position:fixed;
  top:30px;
  left:20px;
  margin:0px;
}
</style>
</head>

<body> 
<section>
  <div>
    <p>This is a paragraph.</p>
  </div>
</section>
</body> 
Further Reading

1. Position

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.