Relative positioning moves an element from its original position in the normal document flow. The space the element would have occupied is preserved, and other elements do not move to fill the gap.
Example 1: Basic Relative Positioning
CSS
/* style.css */
.relative-box {
position: relative;
top: 20px;
left: 30px;
background-color: lightblue;
padding: 20px;
}
HTML
<div class="relative-box">
This box is shifted 20px from the top and 30px from the left.
</div>
Explanation
The position: relative; property allows the use of top, right, bottom, and left to move the element. Here, the div is moved 20 pixels down from its original top position and 30 pixels from its original left position.
Example 2: Overlapping Elements with z-index
CSS
/* style.css */
.box {
width: 100px;
height: 100px;
position: relative;
}
.red-box {
background-color: red;
z-index: 1; /* This box will be on top */
}
.blue-box {
background-color: blue;
top: -50px;
left: 50px;
}
HTML
<div class="box red-box"></div>
<div class="box blue-box"></div>
Explanation
When relatively positioned elements overlap, the z-index property can control their stacking order. The red box has a higher z-index, so it appears on top of the blue box.
Example 3: Containing Absolutely Positioned Children
CSS
/* style.css */
.relative-container {
position: relative;
width: 300px;
height: 200px;
background-color: #eee;
}
.absolute-child {
position: absolute;
bottom: 10px;
right: 10px;
background-color: coral;
padding: 10px;
}
HTML
<div class="relative-container">
<div class="absolute-child">Absolute Child</div>
</div>
Explanation
A relatively positioned parent serves as a containing block for absolutely positioned children. The .absolute-child is positioned relative to the corners of the .relative-container.
Example 4: No Effect on Surrounding Elements
CSS
/* style.css */
.static-sibling {
background-color: lightgreen;
padding: 10px;
}
.relative-element {
position: relative;
top: 50px;
background-color: gold;
padding: 10px;
}
HTML
<div class="static-sibling">I am a static element.</div>
<div class="relative-element">I am moved, but my original space is kept.</div>
<div class="static-sibling">My position is not affected by the relative element above.</div>
Explanation
Even though the gold box is moved down by 50px, the space it would have occupied is preserved in the document flow. The following static element appears where it would have if the gold box had not been moved.
Example 5: Animating with Relative Positioning
CSS
/* style.css */
@keyframes slide-in {
from {
left: -100px;
}
to {
left: 0;
}
}
.animated-box {
position: relative;
animation: slide-in 2s ease-in-out;
background-color: violet;
padding: 15px;
}
HTML
<div class="animated-box">I will slide in!</div>
Explanation
Relative positioning is often used in animations. Here, the left property is animated from -100px to 0, creating a smooth slide-in effect for the element.
Example 6: Using right and bottom Properties
CSS
/* style.css */
.offset-box {
position: relative;
bottom: 15px;
right: 25px;
background-color: #ffc0cb;
padding: 20px;
border: 1px solid #000;
}
HTML
<div class="offset-box">
This box is moved up and to the left.
</div>
Explanation
Using bottom with a positive value moves the element up, and right with a positive value moves it to the left. This provides alternative ways to offset an element.
Example 7: Combining Vertical and Horizontal Offsets
CSS
/* style.css */
.complex-offset {
position: relative;
top: -10px; /* Moves up */
left: 20px; /* Moves right */
background-color: #b0e0e6;
width: 200px;
padding: 10px;
}
HTML
<div class="complex-offset">
Moved both vertically and horizontally.
</div>
Explanation
You can simultaneously use top or bottom with left or right to move an element diagonally from its original position. A negative top value moves the element upwards.