• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Position

← Previous Next →

🔹 What is the position Property in CSS?

The position property in CSS specifies how an element is positioned in the document flow.

It works in combination with the properties:
top, right, bottom, and left.

🔸 Types of Positioning

Value Description
static Default. Elements are positioned in the normal document flow.
relative Positioned relative to its normal position.
absolute Positioned relative to the nearest positioned ancestor.
fixed Positioned relative to the viewport. Stays in place even on scroll.
sticky Toggles between relative and fixed, based on scroll position.

🔸 Syntax

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

🔸 Explanation of Each Type

1. static
div {
  position: static; /* default */
}

✅ Cannot use top/right/bottom/left.

2. relative
div {
  position: relative;
  top: 10px;
}

✅ Moves the element relative to its original place.

3. absolute
div {
  position: absolute;
  top: 0;
  right: 0;
}

✅ Positioned relative to the closest ancestor with a position other than static.

4. fixed
div {
  position: fixed;
  bottom: 0;
  right: 0;
}

✅ Stays fixed in viewport, even on scroll.

5. sticky
div {
  position: sticky;
  top: 0;
}

✅ Sticks to the top of the page while scrolling, then behaves like relative.

Practice Questions

Q1. Make a <div> fixed to the top-right corner of the viewport.

Q2. Position a paragraph 20px down from its normal spot using relative.

Q3. Place a box absolutely inside a positioned parent element.

Q4. Create a sticky header that sticks to the top on scroll.

Q5. Write a class .fixed-footer that pins an element to the bottom of the screen.

Q6. Move a button 30px to the left and 10px up using position: relative.

Q7. Set a child element to absolute and position it 10px from all sides of its parent.

Q8. Use position: static and explain why top doesn’t work.

Q9. Make a notification box that stays visible at top right during scroll using fixed.

Q10. Set a container with position: relative and an icon inside as absolute.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top