• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

CSS Position Quiz

Q1: Which is the default position value in CSS?

A. relative
B. static
C. absolute
D. fixed

Q2: What does position: relative; do?

A. Fixes element to viewport
B. Positions element absolutely
C. Moves element relative to its normal position
D. Removes the element

Q3: Which property makes an element fixed in place during scrolling?

A. sticky
B. absolute
C. fixed
D. float

Q4: What is required for position: absolute; to work as expected?

A. Must be inside a floated parent
B. Parent must have position: relative;
C. Element must be inline
D. Body must be positioned

Q5: Which positioning sticks to the top of the screen when scrolling down?

A. fixed
B. sticky
C. relative
D. absolute

Q6: What happens when you set position: static;?

A. You can move the element freely
B. Element is taken out of document flow
C. Top/right/bottom/left have no effect
D. It becomes a flex item

Q7: Which value removes an element from the normal flow and positions it exactly?

A. absolute
B. fixed
C. sticky
D. float

Q8: Which value allows you to pin an element to a spot regardless of scrolling?

A. sticky
B. fixed
C. float
D. inline-block

Q9: Which positioning value is useful for creating popups inside a container?

A. static
B. absolute
C. relative
D. fixed

Q10: How does position: sticky; behave?

A. Like fixed, always
B. Like relative, always
C. Like relative until a scroll point, then becomes fixed
D. Like inline-block
← Previous Next →
Login
Go Back Top