3.1 position: relative
Relative positioning in CSS lets elements be moved around relative to their original position in the document flow. When you use position: relative, the element keeps its spot in the normal flow, but you can shift it around using the top, right, bottom, and left properties. These properties let you nudge an element around from its usual position.
Basic principles of relative positioning
With relative positioning (position: relative), the element is moved from its original place in the document flow. This shift only affects the element itself, while other elements stay put, as if the element hadn’t moved. This helps create effects where elements overlap or add some extra visual padding.
Syntax:
.element {
position: relative;
top: value;
right: value;
bottom: value;
left: value;
}
Where:
top: shifts the element down from its normal positionright: shifts the element left from its normal positionbottom: shifts the element up from its normal positionleft: shifts the element right from its normal position<value>: can be any valid CSS length value (px,%,em, etc.)
3.2 The top property
The top property moves an element down from its initial position.
Example of using top:
.relative-top {
position: relative;
top: 20px; /* Shifts the element down by 20 pixels */
}
Usage example:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-top {
position: relative;
top: 20px;
background-color: lightblue;
}
<div class="container">
<div class="box static-box">This is a standard block</div>
<div class="box relative-top">This block will be shifted down by 20px.</div>
<div class="box static-box">This is a standard block</div>
</div>
3.3 The right property
The right property shifts an element left from its initial position.
Example of using right:
.relative-right {
position: relative;
right: 20px; /* Shifts the element left by 20 pixels */
}
Usage example:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-right {
position: relative;
right: 20px;
background-color: lightgreen;
padding: 20px;
}
<div class="container">
<div class="box static-box">This is a standard block</div>
<div class="box relative-right">This block will be shifted left by 20px.</div>
<div class="box static-box">This is a standard block</div>
</div>
3.4 The bottom property
The bottom property moves an element up from its initial position.
Example of using bottom:
.relative-bottom {
position: relative;
bottom: 20px; /* Shifts the element up by 20 pixels */
}
Usage example:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-bottom {
position: relative;
bottom: 20px;
background-color: lightcoral;
padding: 20px;
}
<div class="container">
<div class="box static-box">This is a standard block</div>
<div class="box relative-bottom">This block will be shifted up by 20px.</div>
<div class="box static-box">This is a standard block</div>
</div>
3.5 The left property
The left property shifts an element right from its initial position.
Example of using left:
.relative-left {
position: relative;
left: 20px; /* Shifts the element right by 20 pixels */
}
Usage example:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-left {
position: relative;
left: 20px;
background-color: lightgoldenrodyellow;
padding: 20px;
}
<div class="container">
<div class="box static-box">This is a standard block</div>
<div class="box relative-left">This block will be shifted right by 20px.</div>
<div class="box static-box">This is a standard block</div>
</div>
3.6 Interacting with adjacent elements
Elements with position: relative stay in the normal document flow, meaning they still take up space as if they weren't moved. This allows you to shift elements without changing the placement of other elements on the page.
Usage example:
.container {
border: 2px solid #000;
padding: 10px;
}
.box {
position: relative;
background-color: #e74c3c;
color: white;
padding: 20px;
margin: 10px;
width: 200px;
}
.box1 {
top: 20px;
}
.box2 {
left: 20px;
}
<div class="container">
<div class="box box1">Element 1 (shifted down)</div>
<div class="box box2">Element 2 (shifted right)</div>
<div class="box">Element 3 (normal position)</div>
</div>
Code explanation:
-
.box1: the element is shifted down by 20 pixels, but its spot in the normal flow stays, so other elements are placed relative to its original spot -
.box2: the element is shifted right by 20 pixels, but its spot in the normal flow stays
GO TO FULL VERSION