The CSS top property specifies the vertical position of a positioned element from the top edge of its containing block. This property only works on elements with a position value of absolute, relative, fixed, or sticky. You can use length values (like px, em), percentages, or the keyword auto.
Example 1: top with Relative Positioning
/* style.css */
.box-relative {
position: relative; /* Set the positioning context */
top: 20px; /* Move the element 20px down from its normal position */
background-color: lightblue;
width: 150px;
padding: 10px;
}
Explanation With position: relative, the top property moves the element down from its original place in the document flow. The space it would have occupied is preserved.
Example 2: top with Absolute Positioning
/* style.css */
.container {
position: relative; /* Establishes the containing block */
height: 200px;
border: 2px solid #333;
}
.box-absolute {
position: absolute; /* Position relative to the nearest positioned ancestor */
top: 10px; /* Place 10px from the top of .container */
left: 10px;
background-color: lightcoral;
width: 100px;
padding: 10px;
}
Explanation When using position: absolute, the top property positions the element relative to its nearest ancestor that has a position other than static. Here, .box-absolute is placed 10px from the top edge of .container.
Example 3: top with Fixed Positioning
/* style.css */
.fixed-header {
position: fixed; /* Position relative to the viewport */
top: 0; /* Stick to the very top of the browser window */
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
Explanation An element with position: fixed is positioned relative to the browser window, or viewport. Setting top: 0 makes the element stick to the top of the screen, even when the user scrolls.
Example 4: top with a Percentage Value
/* style.css */
.parent-container {
position: relative;
height: 300px; /* Height is required for percentage-based top to work */
border: 2px solid lightgreen;
}
.percent-box {
position: absolute;
top: 50%; /* Position the top edge at 50% of the parent's height */
background-color: lightgreen;
width: 100px;
}
Explanation A percentage value for top is calculated based on the height of the containing block. In this case, top: 50% pushes the element down by half the height of its parent.
Example 5: top with a Negative Value
/* style.css */
.box-negative {
position: relative;
top: -15px; /* Move the element 15px up from its normal position */
background-color: gold;
padding: 10px;
width: 150px;
}
Explanation Using a negative value for top moves the positioned element in the opposite direction, which is upward. This can be useful for creating overlapping effects.
Example 6: top with Sticky Positioning
/* style.css */
.sticky-nav {
position: sticky; /* Acts like relative until it hits the offset */
top: 0; /* Becomes fixed at the top when scrolling past */
background-color: slateblue;
color: white;
padding: 15px;
}
Explanation An element with position: sticky scrolls with the page until it reaches the offset defined by top. It then "sticks" to that position as the user continues to scroll.
Example 7: Vertical Centering with top and transform
/* style.css */
.center-container {
position: relative;
height: 250px;
border: 2px solid orange;
}
.centered-item {
position: absolute;
top: 50%; /* Move the top edge to the vertical midpoint */
left: 50%;
transform: translate(-50%, -50%); /* Shift element up by half its own height */
background-color: orange;
}
Explanation This is a modern technique for perfect vertical and horizontal centering. The top: 50% moves the element's top edge to the container's midpoint, and transform: translateY(-50%) then pulls the element up by half of its own height to align its center.