Mastering CSS: A Comprehensive Guide to Web Design: Chapter 6: CSS Positioning
By Shahin Mannan on
June 3, 2024
- Frontend Development
Static, Relative, Absolute, Fixed, and Sticky Positioning
CSS positioning allows you to control the placement of elements on your web page. There are five main positioning types: static, relative, absolute, fixed, and sticky.
- Static Positioning: This is the default positioning for elements. Elements are positioned according to the normal document flow.
/* No need to specify position: static; since it's the default */- Relative Positioning: Elements are positioned relative to their normal position. Other elements are not affected.
div {
position: relative;
top: 10px;
left: 20px;
}
- Absolute Positioning: Elements are positioned relative to their nearest positioned ancestor. If there is no positioned ancestor, it is positioned relative to the initial containing block.
div {
position: absolute;
top: 50px;
left: 100px;
}
- Fixed Positioning: Elements are positioned relative to the browser window. They remain in the same place even when the page is scrolled.
div {
position: fixed;
top: 0;
right: 0;
width: 200px;
}
- Sticky Positioning: Elements are toggled between relative and fixed positioning based on the user's scroll position.
div {
position: sticky;
top: 0;
background-color: yellow;
}
Z-Index
The z-index property determines the stack order of positioned elements (elements with a position value other than static). An element with a higher z-index is always in front of an element with a lower z-index.
Example:
div {
position: absolute;
top: 50px;
left: 50px;
z-index: 10;
}
Exercise: Creating a Fixed Navigation Bar
Let's create a fixed navigation bar using the positioning concepts we've learned.
- Create an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Navigation Bar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="home"><h1>Home</h1></section>
<section id="about"><h1>About</h1></section>
<section id="services"><h1>Services</h1></section>
<section id="contact"><h1>Contact</h1></section>
</body>
</html>
- Create a CSS file:
body {
margin: 0;
font-family: Arial, sans-serif;
}
nav {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
z-index: 1000;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
nav ul li {
margin: 0;
}
nav ul li a {
color: white;
text-decoration: none;
padding: 15px 20px;
display: block;
}
section {
padding: 100px 20px;
height: 100vh;
}
section
(odd) {
background-color: #f4f4f4;
}
section
(even) {
background-color: #fff;
}
Open the HTML file in a browser to see your fixed navigation bar. Experiment with different positioning values to see how they affect the layout and behavior of your elements.
Coming Up Next
In Chapter 7, we'll explore the Flexbox layout model, a powerful tool for creating flexible and responsive layouts with ease.
Please Sign In to post a comment.