Web Development Course Class 30

Position Property in CSS (Web Development Course Class 30)

✅ position: static; Position Property in CSS (Web Development Course Class 30)
Definition: This is the default position. Elements appear in normal document flow (i.e., where they naturally occur).
Example:

div {
  position: static;
}

✅ position: relative; Position Property in CSS (Web Development Course Class 30)
Definition: The element stays in its normal position, but you can move it using top, bottom, left, or right.
Example:

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

Meaning: It looks like it’s in the same place, but shifted slightly.

✅ position: absolute; Position Property in CSS (Web Development Course Class 30)
Definition: The element is removed from the normal flow and placed exactly where you want, relative to the nearest positioned parent (parent must have position: relative or similar).
Example:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

Meaning: This is used when you want something to sit in a corner or exact spot inside another box.

✅ position: fixed; Position Property in CSS (Web Development Course Class 30)
Definition: The element stays in the same position even when you scroll. It’s positioned relative to the browser window.
Example:
“`css
div {
position: fixed;

bottom: 0;
right: 0;
}

*Meaning*: Useful for sticky menus or chat buttons that stay in place.

---

✅ `position: sticky;`  
*Definition*: The element behaves like relative until a certain scroll point, then it “sticks” like fixed.  
*Example*:

css
div {
position: sticky;
top: 0;
}
“`
Meaning: Great for headings or tabs that stay at the top while scrolling through a section.

📌 Summary for Students:

• static – normal/default
• relative – move slightly from original place
• absolute – fully controlled inside parent
• fixed – stays in place on screen
• sticky – scrolls, then sticks