This content originally appeared on DEV Community and was authored by Vigneshwaralingam
❓ What is position in CSS?
The position property in CSS defines how an element is placed in the document layout. It controls whether an element follows the normal flow or is manually positioned using top, left, right, and bottom.
🕒 When do you use position?
Use it when you want to:
- Fix something on screen (like a navbar or button)
- Layer items (like overlays, modals, tooltips)
- Place elements relative to a parent or the page
💡 Why is position important?
- Helps create dynamic, interactive UIs
- Essential for responsive layout behavior
- Works with
z-index,top,left, etc. for fine control - Used in modals, tooltips, sticky headers, buttons, etc.
🌍 Where is it applied?
You can apply it to any block, inline, or inline-block element:
.box {
position: relative;
top: 20px;
}
🔍 Which position values are there?
| Value | Description |
|---|---|
static |
Default value. Element follows normal flow. |
relative |
Moves element relative to its original place. |
absolute |
Positioned relative to nearest positioned ancestor. |
fixed |
Positioned relative to the browser window. Stays fixed while scrolling. |
sticky |
Switches between relative and fixed based on scroll position. |
⚙️ How does each one work? + Example
🔹 1. static (Default)
.box {
position: static;
}
➡️ No special behavior. Follows the natural document flow.
🔹 2. relative
.box {
position: relative;
top: 20px;
}
➡️ Moves 20px down from its original position, without affecting surrounding elements.
🔹 3. absolute
.container {
position: relative;
}
.box {
position: absolute;
top: 10px;
left: 20px;
}
➡️ .box is positioned 10px from the top and 20px from the left of .container.
🔹 4. fixed
.button {
position: fixed;
bottom: 10px;
right: 10px;
}
➡️ Sticks the button to the bottom-right of the screen even while scrolling.
🔹 5. sticky
.header {
position: sticky;
top: 0;
}
➡️ .header scrolls normally but sticks to the top when it reaches it.
🔁 Difference Between All Positions
| Property | Scrolls with Page | Affects Flow | Relative To | Use Case |
|---|---|---|---|---|
| static | ✅ Yes | ✅ Yes | Document flow | Default behavior |
| relative | ✅ Yes | ✅ Yes | Its original position | Slight offset |
| absolute | ❌ No | ❌ No | Nearest positioned parent | Overlays, tooltips |
| fixed | ❌ No | ❌ No | Browser window | Sticky footer, navbar |
| sticky | ✅ Yes (then no) | ✅ Yes | Scroll position | Sticky headers |
🧠 Interview Questions & Answers – CSS position
✅ 1. What is the default position of an element in CSS?
Answer:
static — which means the element follows the normal document flow and cannot be positioned using top, left, etc.
✅ 2. What’s the difference between relative and absolute positioning?
Answer:
-
relative: moves the element based on its original location, keeping its space in the layout. -
absolute: removes the element from the layout and positions it relative to the nearest positioned ancestor.
✅ 3. What is position: fixed used for?
Answer:
To fix an element in the viewport — it doesn’t move when the page scrolls. Common use: floating buttons, sticky footers.
✅ 4. What is the use of position: sticky?
Answer:
It allows an element to scroll with the content but stick to a position (like top: 0) when it reaches it. It's useful for sticky headers and menus.
✅ 5. What does “positioned ancestor” mean?
Answer:
Any parent element with a position other than static (i.e., relative, absolute, or fixed) is called a positioned ancestor.
✅ 6. If a parent has position: relative, and the child has position: absolute, what happens?
Answer:
The child will position itself relative to the parent’s edges, not the whole page.
✅ 7. Can an inline element be positioned?
Answer:
Yes, but it's better to convert it to inline-block or block before applying position styles for better layout control.
✅ 8. What happens if you apply top: 0 to a static element?
Answer:
Nothing. top, left, right, bottom only work with relative, absolute, fixed, or sticky positions.
This content originally appeared on DEV Community and was authored by Vigneshwaralingam
Vigneshwaralingam | Sciencx (2025-06-11T17:22:43+00:00) 📌 CSS `position` Property – What, When, Why, Where, Which, How + Examples & Interview Q&A. Retrieved from https://www.scien.cx/2025/06/11/%f0%9f%93%8c-css-position-property-what-when-why-where-which-how-examples-interview-qa/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.