QuitExams

What are CSS Position Properties?

The CSS position property determines how an element is placed on a web page. It defines whether the element stays in the normal flow or moves relative to other elements.

1️⃣ position: static;

This is the default position. The element appears in the normal document flow.

<style>
.static-box {
  position: static;
  background: #f2f2f2;
  border: 2px solid #333;
  padding: 10px;
}
</style>

<div class="static-box">I am static (default)</div>

2️⃣ position: relative;

The element is positioned relative to its normal position. Use top, bottom, left, right to move it.

<style>
.relative-box {
  position: relative;
  top: 20px;
  left: 30px;
  background: #cce5ff;
  border: 2px solid #007bff;
  padding: 10px;
}
</style>

<div class="relative-box">I moved 20px down and 30px right</div>

3️⃣ position: absolute;

The element is positioned relative to its nearest positioned ancestor (not static). It is removed from the normal flow.

<style>
.parent {
  position: relative;
  height: 120px;
  background: #ffe0b2;
  border: 2px dashed #ff9800;
  margin-bottom: 20px;
}
.absolute-box {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #ffcc80;
  border: 2px solid #ff5722;
  padding: 10px;
}
</style>

<div class="parent">
  Parent (relative)
  <div class="absolute-box">I am absolute inside parent</div>
</div>

4️⃣ position: fixed;

The element stays fixed relative to the browser window. It does not move when you scroll the page.

<style>
.fixed-box {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #d4edda;
  border: 2px solid #28a745;
  padding: 10px;
}
</style>

<div class="fixed-box">I stay fixed at bottom-right corner</div>

5️⃣ position: sticky;

The element behaves like relative until a certain scroll point, then it sticks like fixed.

<style>
.sticky-header {
  position: sticky;
  top: 0;
  background: #e3f2fd;
  border: 2px solid #2196f3;
  padding: 10px;
}
</style>

<div class="sticky-header">I stick to the top while scrolling</div>
<p>Scroll to see sticky effect...</p>
<p>Lots of text here...</p>
<p>More text to enable scrolling...</p>
<p>Keep scrolling to watch the sticky header stay!</p>

📘 Summary of Position Values