CSS positioning bottom
CSS Positioning Bottom
In web design, the bottom section is often a specially designed area. It can be used to place content such as copyright information and contact information. In CSS, we can use positioning properties to position an element at the bottom.
1. Positioning an element at the bottom using relative positioning
Relative positioning positions an element relative to its position within the document flow. For example, we can set relative positioning on a parent element and then adjust the element to the bottom using the bottom property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bottom Positioning Example</title>
<style>
.footer {
position: relative;
bottom: 0;
width: 100%;
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<div class="content">
<h1>This is the webpage content</h1>
<p>This is the main content of the webpage. You can place some text or https://coder-cafe.com/wp-content/uploads/2025/09/images.</p>
</div>
<div class="footer">
Copyright © 2021
</div>
</body>
</html>
In the above example, we set relative positioning for the bottom element and then fixed it at the bottom position by setting bottom: 0;. At the same time, beautify the bottom area by setting styles such as width, background color, and text color.
2. Use absolute positioning to place elements at the bottom
Absolute positioning refers to positioning relative to the nearest positioned ancestor element. We can use this feature to place elements at the bottom of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bottom positioning example</title>
<style>
body {
position: relative;
min-height: 100vh;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<div class="content"> <h1>This is the webpage content</h1>
<p>This is the main body of the webpage. You can place text, https://coder-cafe.com/wp-content/uploads/2025/09/images, and other content here.</p>
</div>
<div class="footer">
Copyright © 2021
</div>
</body>
</html>
In the example above, we set relative positioning for the body element and set min-height: 100vh; to ensure that the bottom content is visible. Then, the bottom element is positioned absolutely, with bottom: 0; set to position it at the bottom.
3. Use fixed positioning to position the element at the bottom
Fixed positioning refers to positioning relative to the browser window. We can use this feature to fix an element to the bottom of the page, ensuring that it remains visible regardless of the user’s scrolling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bottom Positioning Example</title>
<style>
.footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<div class="content">
<h1>This is the webpage content</h1>
<p>This is the main content of the webpage. You can place some text or https://coder-cafe.com/wp-content/uploads/2025/09/images. </p>
</div>
<div class="footer">
Copyright © 2021
</div>
</body>
</html>
In the above example, we set fixed positioning for the bottom element, pinning it to the bottom of the browser window by setting bottom: 0; This way, the bottom content will always appear at the bottom, regardless of how the user scrolls.
Through the example code above, we can use different positioning properties to position elements at the bottom of a webpage. You can choose the appropriate positioning method based on your needs. Positioning elements at the bottom can provide a better user experience and make the page look more complete and professional.