Positioning and Changing the location of an Element.

Unless otherwise, HTML elements flow statically from the left to the right in the same order they are declared in your HTML code.
CSS code comes in to provide a mechanism to specify some advanced options in the position of an element. The position property specifies the type of positioning method used for an element.
There are five different position values: static, relative, fixed, absolute, sticky.

Static Positioning

This is the default for every single page element in HTML. Different elements don't have different default values for positioning, they all start out as static.
A valid reason for static positioning is to forcefully remove positioning that got applied to an element outside of your control, maybe when using a css framework.

<html>
<head>
<div class="staticdiv">
  This div element has position: static;
</div>
</head>
</html>

<style>
.staticdiv {
  position: static;
  border: 3px solid #000456;
}
</style>

Absolute Positioning

Absolute positioning allows an element to be placed in an exact location specified, relative to its parent or container's border.
You can apply properties individually; left, right, top, bottom. The absolute position takes a distance parameter that specifies the relative distance of the object from a reference point based on the positioning attribute specified.

<body>
  <div class="relativediv">This div element has position: relative;
  <div class="absolutediv">This div element has position: absolute;</div>
</div>

</body>

<style>
.relativediv {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73ff57;
} 

.absolutediv {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #69DA21;
}
</style>

Relative Positioning

With relative positioning, the element is positioned relative to it's immediate left sibling's coordinates.

Fixed Positioning

Fixed positioning is rarely used. A fixed position element is positioned relative to the viewport or browser window. An element with position:fixed will stay right where it is when the page is scrolled.

The top, right, bottom, and left properties are used to position the element.

<body>
<div class="fixeddiv">
This div element has position: fixed;
</div>
</body>

<style>
.fixeddiv {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>

Sticky Positioning

The position sticky allows an element to be positioned based on the user's scroll position.
Sticky element toggles between relative and fixed positioning, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in a specified place.

<body>
<div class="stickydiv">I am sticky!</div>
</body>

<style>
.stickydiv {
  position: -webkit-sticky; /*for safari browsers*/
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>

Yep, that is what I have got on the five positioning values.
Please feel free to drop your comments and anything additional on positioning and location of elements.

Blog

Positioning and Changing the location of an Element.

Stella Mwanahamuntu

Static Positioning

Absolute Positioning

Relative Positioning

Fixed Positioning

Sticky Positioning

Join Our Newsletter. No Spam, Only the good stuff.

Related