| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
CSS positioning allows you to place elements in precise locations on a web page. Here’s a detailed description of each positioning type with examples:
1. Static Positioning
Definition: This is the default positioning for HTML elements. Elements are positioned according to the normal flow of the document.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.static {
background-color: lightblue;
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="static">Static</div>
</body>
</html>
In this example, the ‘div‘ with the class ‘static‘ will be positioned according to the normal flow of the document.
2. Relative Positioning
Definition: The element is positioned relative to its normal position. Setting ‘top‘, ‘right‘, ‘bottom‘, and ‘left‘ properties will adjust its position from where it would normally be.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.relative {
position: relative;
top: 20px;
left: 30px;
background-color: lightgreen;
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="relative">Relative</div>
</body>
</html>
In this example, the ‘div‘ with the class ‘relative‘ is shifted 20px down and 30px to the right from its normal position.
3. Absolute Positioning
Definition: The element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor with a position other than ‘static‘). If no such ancestor exists, it is positioned relative to the initial containing block (the ‘<html>‘ element).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.absolute-container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid black;
}
.absolute {
position: absolute;
top: 50px;
left: 70px;
background-color: lightcoral;
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="absolute-container">
<div class="absolute">Absolute</div>
</div>
</body>
</html>
In this example, the div with the class absolute is positioned 50px down and 70px to the right from the top-left corner of its nearest positioned ancestor, which is the ‘div‘ with the class ‘absolute-container‘.
4. Fixed Positioning
Definition: The element is positioned relative to the viewport and will not move when the page is scrolled.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.fixed {
position: fixed;
top: 20px;
right: 20px;
background-color: lightyellow;
width: 100px;
height: 100px;
border: 1px solid black;
}
.content {
height: 2000px; /* To enable scrolling */
}
</style>
</head>
<body>
<div class="fixed">Fixed</div>
<div class="content"></div>
</body>
</html>
In this example, the ‘div‘ with the class ‘fixed‘ will remain in the same position (20px from the top and right) even when the page is scrolled.
5. Sticky Positioning
Definition: The element is positioned based on the user’s scroll position. It toggles between ‘relative‘ and ‘fixed‘ positioning, depending on the scroll position.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.sticky {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 0;
background-color: lightgray;
width: 100%;
height: 50px;
border: 1px solid black;
}
.content {
height: 2000px; /* To enable scrolling */
}
</style>
</head>
<body>
<div class="sticky">Sticky</div>
<div class="content"></div>
</body>
</html>
In this example, the ‘div‘ with the class ‘sticky‘ will act as a relatively positioned element until the top of the viewport reaches its top position (0px). Then, it will act as a fixed element, staying at the top of the viewport as the user scrolls down.
These examples illustrate the different positioning schemes in CSS and how they affect the placement of elements on a web page.
