CSS Position Property -

CSS position property

The position property in CSS is a fundamental building block for creating responsive and visually appealing web designs. It defines the positioning method used for an element within its containing element. The property accepts several values, each influencing how the element is displayed on the page.

In the below PDF we discuss about CSS Position Property in detail in simple language, Hope this will help in better understanding.

Basic Values of the Position Property:

1. Static (default): Elements are positioned according to the normal flow of the document. This is the default value, and elements with position: static; are not affected by the top, right, bottom, or left properties.

.element {
position: static;
}

2. Relative: The element is positioned relative to its normal position. This means you can move it left, right, up, or down without affecting the positioning of other elements on the page.

.element {
position: relative;
top: 10px;
left: 20px;
}

3. Absolute: The element is removed from the normal document flow and positioned relative to its closest positioned ancestor. If there is no such ancestor, it is positioned relative to the initial containing block.

.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

4. Fixed: The element is removed from the normal document flow and positioned relative to the browser window. It remains fixed even when the user scrolls the page.

.element {
position: fixed;
top: 0;
right: 0;
}

5. Sticky: The element is positioned based on the user’s scroll position. It is treated as relative positioned until it crosses a specified point, after which it is treated as fixed.

.element {
position: sticky;
top: 10px;
}

Applications:

Creating Responsive Headers and Footers:Use position: fixed; for headers to keep them at the top of the page.
Employ position: sticky; for sticky navigation bars that remain visible while scrolling.
Building Overlays and Modals: Utilize position: absolute; to create overlays and modals that appear above the content.
Designing Flexible Layouts: Combine position: relative; with percentage-based values for flexible and adaptive layouts.