Day 4: Learning CSS Positioning — Fixed, Relative, Absolute & Sticky 🚀

Today is Day 4 of my web development learning journey.

Today I learned about the different CSS position properties and how they control the placement of elements on a webpage.

1. position: relative

The relative position allows an element to be moved from its normal position using properties such as top, left, right, and bottom.

css
.box {
position: relative;
top: 20px;
left: 10px;
}

1. position: absolute

The absolute position removes the element from the normal document flow and positions it relative to its nearest positioned ancestor.

.box {
position: absolute;
top: 0;
right: 0;
}

1. position: fixed

The fixed position keeps an element in the same place on the screen even when the page is scrolled.

.navbar {
position: fixed;
top: 0;
width: 100%;
}

1. position: sticky

The sticky position behaves like a normally positioned element until a specified scroll position is reached. Then it sticks to that position.

.navbar {
position: sticky;
top: 0;
}

html #css #webdevelopment #beginners