CSS Position Practice Questions with Solutions

By /

Introduction

The CSS position property controls how an HTML element is placed on a webpage. You can position elements normally, move them relative to their original position, place them at fixed locations, or position them relative to a parent element. Understanding CSS positioning is important for creating menus, banners, buttons, cards, and modern website layouts. In this chapter, you’ll practice CSS position properties through simple solved questions that are easy for beginners to understand. CSS Position Practice questions with solutions help to understand the concepts.

Question 1: Set an Element to Relative Position

Problem Statement

Write CSS to set a <div> element to relative positioning.

CSS Code

div {
    position: relative;
}

Output

The <div> remains in its normal position and can now be moved using top, right, bottom, or left.

Explanation

  • position: relative; keeps the element in the normal document flow.
  • It allows you to move the element using position properties.
  • Other elements keep their original positions.

Question 2: Move an Element 20px from the Top

Problem Statement

Write CSS to move a relatively positioned <div> 20px downward.

CSS Code

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

Output

The <div> moves 20px downward from its original position.

Explanation

  • top: 20px; moves the element downward.
  • This works because the element uses position: relative;.
  • The original space occupied by the element remains reserved.

Question 3: Set an Element to Absolute Position

Problem Statement

Write CSS to position a <div> absolutely.

CSS Code

div {
    position: absolute;
}

Output

The <div> is removed from the normal document flow and positioned relative to its nearest positioned ancestor.

Explanation

  • position: absolute; removes the element from the normal page flow.
  • The element can be placed using top, right, bottom, and left.
  • If no positioned parent exists, it is positioned relative to the page.

Question 4: Position an Element 30px from the Top and 40px from the Left

Problem Statement

Write CSS to place an absolutely positioned <div> 30px from the top and 40px from the left.

CSS Code

div {
    position: absolute;
    top: 30px;
    left: 40px;
}

Output

The <div> appears 30px from the top and 40px from the left of its positioned parent.

Explanation

  • top controls the distance from the top.
  • left controls the distance from the left.
  • These properties work with position: absolute;.

Question 5: Fix an Element at the Top of the Browser Window

Problem Statement

Write CSS to keep a <header> fixed at the top of the browser window.

CSS Code

header {
    position: fixed;
    top: 0;
}

Output

The <header> stays at the top of the browser window, even when the page is scrolled.

Explanation

  • position: fixed; fixes the element relative to the browser window.
  • top: 0; places it at the top.
  • The element remains visible while scrolling.

Question 6: Make an Element Sticky

Problem Statement

Write CSS to make a <nav> element stick to the top of the page while scrolling.

CSS Code

nav {
    position: sticky;
    top: 0;
}

Output

The <nav> scrolls normally until it reaches the top of the page, then it stays fixed there while scrolling.

Explanation

  • position: sticky; combines relative and fixed positioning.
  • top: 0; tells the browser where the element should stick.
  • Sticky navigation bars are commonly used on modern websites.

Question 7: Position an Element from the Right Side

Problem Statement

Write CSS to place an absolutely positioned <div> 50px from the right side of its parent.

CSS Code

div {
    position: absolute;
    right: 50px;
}

Output

The <div> appears 50px away from the right edge of its positioned parent.

Explanation

  • right controls the distance from the right side.
  • It works with positioned elements such as absolute, fixed, or relative.
  • This property is useful for placing buttons and icons.

Question 8: Overlap Elements Using z-index

Problem Statement

Write CSS to place one absolutely positioned <div> above other overlapping elements.

CSS Code

div {
    position: absolute;
    z-index: 10;
}

Output

The <div> appears above other overlapping elements with a lower z-index.

Explanation

  • z-index controls the stacking order of positioned elements.
  • Higher values appear above lower values.
  • z-index works only on positioned elements.

Question 9: Center an Absolutely Positioned Element

Problem Statement

Write CSS to place an absolutely positioned <div> in the center of its parent element.

CSS Code

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Output

The <div> appears exactly in the center of its parent element.

Explanation

  • top: 50%; moves the element halfway down.
  • left: 50%; moves the element halfway across.
  • transform: translate(-50%, -50%); shifts the element back by half of its own width and height for perfect centering.

Question 10: Create a Fixed “Back to Top” Button

Problem Statement

Write CSS to create a button that stays fixed in the bottom-right corner of the browser window.

CSS Code

button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

Output

The button remains visible in the bottom-right corner even while the page is scrolled.

Explanation

  • position: fixed; keeps the button attached to the browser window.
  • bottom: 20px; places it 20px above the bottom edge.
  • right: 20px; places it 20px from the right edge.
  • This technique is commonly used for “Back to Top” buttons and chat widgets.

Key Takeaways

  • position: relative; keeps the element in the normal flow and allows movement.
  • position: absolute; removes the element from the normal flow and positions it relative to its nearest positioned ancestor.
  • position: fixed; keeps an element fixed to the browser window.
  • position: sticky; sticks an element when it reaches a specified scroll position.
  • top, right, bottom, and left control element placement.
  • z-index controls which positioned element appears on top.
  • transform: translate() is commonly used to perfectly center absolutely positioned elements.

Frequently Asked Questions (FAQs)

1. What is the CSS position property?

The position property determines how an HTML element is positioned on a webpage.

2. What is the difference between relative and absolute positioning?

  • relative keeps the element in the normal document flow.
  • absolute removes the element from the normal flow and positions it relative to its nearest positioned ancestor.

3. When should I use position: fixed;?

Use position: fixed; for elements that should stay visible while scrolling, such as headers, chat buttons, or “Back to Top” buttons.

4. What does position: sticky; do?

position: sticky; allows an element to scroll normally until it reaches a specified position, then it remains fixed while the user continues scrolling.

5. What is the purpose of z-index?

The z-index property controls the stacking order of overlapping positioned elements. Higher values appear above lower values.

6. Why is transform: translate(-50%, -50%) used for centering?

It shifts the element back by half of its own width and height, allowing it to be perfectly centered.

7. Which CSS properties are commonly used with the position property?

The most common properties are:

  • top
  • right
  • bottom
  • left
  • z-index

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top