CSS position Property

In this chapter, we will learn about the CSS position property. The position property is used to control the positioning of elements on a web page. It allows you to place elements in specific locations within the document. We will cover:

• Introduction to the Position Property
• Static Positioning
• Relative Positioning
• Absolute Positioning
• Fixed Positioning
• Sticky Positioning
• Z-Index
• Examples of Using the Position Property

Introduction to the Position Property

The position property specifies the type of positioning method used for an element. There are five different position values: static, relative, absolute, fixed, and sticky.

Syntax

element {
  position: value;
}

Static Positioning

Static is the default value for the position property. Elements with position: static; are positioned according to the normal flow of the document. They are not affected by top, bottom, left, and right properties.

Example

div {
  position: static;
}

HTML

<div>This is a statically positioned element.</div>

Relative Positioning

Elements with position: relative; are positioned relative to their normal position. You can use the top, bottom, left, and right properties to adjust their position.

Example

div {
  position: relative;
  top: 20px;
  left: 30px;
}

HTML

<div>This is a relatively positioned element.</div>

In this example, the <div> is moved 20 pixels down and 30 pixels to the right from its normal position.

Absolute Positioning

Elements with position: absolute; are positioned relative to the nearest positioned ancestor (an element with a position value other than static). If there is no such ancestor, the element is positioned relative to the initial containing block (usually the viewport).

Example

.container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: lightgray;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: lightcoral;
}

HTML

<div class="container">
  <div class="child">This is an absolutely positioned element.</div>
</div>

In this example, the .child element is positioned 50 pixels from the top and 50 pixels from the left of its .container parent.

Fixed Positioning

Elements with position: fixed; are positioned relative to the viewport. They remain fixed in place even when the page is scrolled.

Example

div {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

HTML

<div>This is a fixed positioned element.</div>

In this example, the <div> remains in the top-right corner of the viewport, even when the page is scrolled.

Sticky Positioning

Elements with position: sticky; are positioned based on the user’s scroll position. A sticky element toggles between relative and fixed, depending on the scroll position.

Example

div {
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 10px;
}

HTML

<div>This is a sticky positioned element.</div>

In this example, the <div> will stick to the top of the page when you reach its scroll position.

Z-Index

The z-index property specifies the stack order of elements. Elements with a higher z-index are displayed in front of elements with a lower z-index. The z-index property only works on positioned elements (those with a position value other than static).

Example

div {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  z-index: 1;
}

div.overlay {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  z-index: 2;
}

HTML

<div>This is a lower z-index element.</div>
<div class="overlay">This is a higher z-index element.</div>

In this example, the .overlay element is displayed in front of the first <div> because it has a higher z-index value.

Examples of Using the Position Property

Example 1: Relative and Absolute Positioning

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: lightgray;
}

.child {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  background-color: lightcoral;
}

HTML

<div class="container">
  <div class="child">Absolute Position</div>
</div>

Example 2: Fixed Positioning

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: lightblue;
  padding: 10px;
  text-align: center;
}

HTML

<header>Fixed Header</header>
<p>Scroll down to see the fixed header in action.</p>

Example 3: Sticky Positioning

nav {
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 10px;
}

HTML

<nav>Sticky Navigation Bar</nav>
<p>Scroll down to see the sticky navigation bar in action.</p>

Conclusion

In this chapter, you learned about the CSS position property, including static, relative, absolute, fixed, and sticky positioning. You also learned how to use the z-index property to control the stacking order of elements. Understanding the position property is crucial for creating complex layouts and achieving precise control over the placement of elements on a web page.