top and bottom in CSS

In CSS, top and bottom are properties used to set the distance of an element’s top and bottom edges relative to its containing block (the parent element). These two properties are often used for positioning elements, particularly when using absolute positioning (position: absolute).

Top Property

The top property sets the offset of an element’s top edge relative to the top edge of its containing block. The top property takes effect if the element’s position property is absolute or fixed.

Syntax:

element {
position: absolute;
top: value;
}

Where value can be a length value (such as pixels (px), percentage (%), etc.) or a negative value.

Here’s an example showing how to use the top attribute to move an element down 50 pixels relative to the top edge of its parent element:

<!DOCTYPE html> 
<html Tutorial">html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Top Property Example</title> 
<style> 
.parent { 
position: relative; 
width: 200px; 
height: 200px; 
background-color: lightblue; 
} 

.child { 
position: absolute; 
top: 50px; 
left: 50px; 
width: 100px; 
height: 100px; 
background-color: lightcoral; 
} 
</style> 
</head> 
<body> 
<div class="parent"> 
<div class="child"></div> </div> 
</body> 
</html>

In the example above, the .parent element is set to position: relative;, and its child .child is set to position: absolute; and shifted downward by 50 pixels using the top: 50px; property.

bottom Property

Similar to the top property, the bottom property sets the offset of an element’s bottom edge relative to the bottom edge of its containing block. Again, the bottom property only takes effect when the element’s position property is absolute or fixed.

Syntax:

element { 
position: absolute; 
bottom: value; 
}

value‘s value is similar to the top attribute and can be a length or a negative value.

Here is an example showing how to use the bottom property to move an element up 30% relative to the bottom edge of its parent element:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Bottom Property Example</title> 
<style> 
.parent { 
position: relative; 
width: 200px; 
height: 200px; 
background-color: lightblue; 
} 

.child { 
position: absolute; 
bottom: 30%; 
left: 50px; 
width: 100px; 
height: 100px; 
background-color: lightcoral; 
} 
</style> 
</head> 
<body> 
<div class="parent"> 
<div class="child"></div> 
</div> 
</body> 
</html>

In the above example, the .parent and .child elements are styled similarly to the previous example, but the bottom: 30%; property of the .child element shifts it up 30% relative to the bottom edge of the parent element.

Notes

When using the top and bottom properties, the element’s position property should be set to absolute or fixed to position it relative to the containing block.
If you use the top and bottom properties together, the element’s height will automatically adjust based on their values to maintain the same size. This is important to note.
When using these two properties, you can use them in conjunction with the left and right properties for more precise positioning.

In general, the top and bottom properties are commonly used positioning properties in CSS. By setting these two properties, we can easily control the position of an element relative to its containing block, achieving more flexible layout effects.