DEV Community

Dinesh G
Dinesh G

Posted on

Day 18 of my JAVA FULL STACK Development Learning Journey:HTML&CSS

#html #css #react #java

Hey all!
Welcome to my another blog. Here is a another blog from my html & css series, about topics for Position in CSS . What I learn Today.

Type of Positions:

.Static
.Relative
.Absolute
.Fixed
.Sticky

Static (default):

The default position. Elements flow normally in the document.
Top/Left/Right/Bottom have no effect.

div {
  position: static;
}
Enter fullscreen mode Exit fullscreen mode

Relative:

The element stays in the normal document flow but can be offset using top, left, right, or bottom.
It moves relative to its original position.

div {
  position: relative;
  top: 20px;   /* moves down 20px */
  left: 10px;  /* moves right 10px */
}
Enter fullscreen mode Exit fullscreen mode

Absolute:

The element is removed from the normal flow and positioned relative to the nearest positioned ancestor (relative, absolute, or fixed).
If none exists, it's positioned relative to the element (the page itself).

div {
  position: absolute;
  top: 50px;
  left: 100px;
}
Enter fullscreen mode Exit fullscreen mode

Fixed:
Positioned relative to the viewport (browser window), not affected by scroll.
It stays in the same place even when you scroll the page.

div {
  position: fixed;
  top: 0;
  right: 0;
}
Enter fullscreen mode Exit fullscreen mode

Sticky:

Acts like relative until a scroll threshold is met, then acts like fixed.
Good for sticky headers or sidebars.

div {
  position: sticky;
  top: 10px;
}
Enter fullscreen mode Exit fullscreen mode

And special thanks to Dharshini and swetha for sharing the topics to us in this session.

Happy coding

Top comments (0)