How CSS Positioning and Flexbox Work?

Last Updated : 25 Jun, 2024

CSS positioning and Flexbox are fundamental tools for web layout and design. Understanding how they work can help you create more responsive and well-structured web pages. CSS positioning allows you to control the placement of elements on the web page. There are several positioning schemes in CSS.

Types of Positions

Static Positioning (position: static;)

This is the default positioning for all elements. Elements are positioned according to the normal document flow, one after the other.
No special positioning occurs, the top, right, bottom, and left properties have no effect.

Relative Positioning (position: relative)

The element is positioned relative to its normal position. You can use the top, right, bottom, and left properties to move the element from its normal position.
Other elements around it are not affected and stay in their original positions.

Absolute Positioning (position: absolute)

The element is removed from the normal document flow and positioned relative to its nearest positioned ancestor (an element with a position value other than static).
If no such ancestor exists, it is positioned relative to the initial containing block (usually the viewport).
Other elements behave as if the positioned element does not exist.

Fixed Positioning (position: fixed)

The element is positioned relative to the viewport. It stays in the same place even when the page is scrolled.
Like absolute, the element is removed from the normal document flow, and other elements act as if it does not exist.

Sticky Positioning (position: sticky)

This is a hybrid between relative and fixed positioning. The element is treated as relative until it crosses a specified threshold (defined by top, right, bottom, or left), at which point it becomes fixed.
It is particularly useful for creating sticky headers or sidebars.

Flexbox

Flexbox (Flexible Box Layout) is a layout module designed to help you arrange elements predictably, even when their size is unknown or dynamic. Flexbox is particularly useful for creating responsive layouts. To use Flexbox, you need a container element with display: flex; or display: inline-flex. The direct children of this container become flex items.

Key Flexbox properties:

Container Properties

display: flex; or display: inline-flex;: Defines a flex container, enabling flex context for all its direct children.
flex-direction: Defines the direction of the main axis (row, row-reverse, column, column-reverse).
flex-wrap: Controls whether the flex items should wrap onto multiple lines (nowrap, wrap, wrap-reverse).
justify-content: Aligns flex items along the main axis (flex-start, flex-end, center, space-between, space-around, space-evenly).
align-items: Aligns flex items along the cross axis (flex-start, flex-end, center, baseline, stretch).
align-content: Aligns flex lines when there are multiple lines (flex-start, flex-end, center, space-between, space-around, stretch).

Item Properties

order: Controls the order of the flex items (default is 0).
flex-grow: Defines how much a flex item should grow relative to the rest (default is 0).
flex-shrink: Defines how much a flex item should shrink relative to the rest (default is 1).
flex-basis: Defines the default size of a flex item before the remaining space is distributed (can be a length or percentage).
align-self: Overrides align-items for individual flex items (auto, flex-start, flex-end, center, baseline, stretch).

Example: The example demonstrates the CSS Positioning.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>CSS Positioning Example</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .static-box {
            position: static;
            background-color: lightblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }

        .relative-box {
            position: relative;
            top: 20px;
            left: 30px;
            background-color: lightgreen;
            width: 100px;
            height: 100px;
            margin: 10px;
        }

        .absolute-box-container {
            position: relative;
            /* Container with relative position 
             for absolute positioning */
            width: 300px;
            height: 300px;
            margin: 10px;
            background-color: lightgrey;
        }

        .absolute-box {
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: lightcoral;
            width: 100px;
            height: 100px;
        }

        .fixed-box {
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: lightpink;
            width: 100px;
            height: 100px;
        }

        .sticky-box-container {
            height: 300px;
            background-color: lightyellow;
            margin: 10px;
            padding: 10px;
            overflow: auto;
        }

        .sticky-box {
            position: sticky;
            top: 0;
            background-color: lightgoldenrodyellow;
            width: 100%;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="static-box">Static</div>
    <div class="relative-box">Relative</div>

    <div class="absolute-box-container">
        <div class="absolute-box">Absolute</div>
    </div>

    <div class="fixed-box">Fixed</div>

    <div class="sticky-box-container">
        <div class="sticky-box">Sticky</div>
        <p>Embark on an extraordinary coding odyssey with our
            groundbreaking course, "DSA to Development
            - Complete Coding Guide"!
            ? Discover the transformative power
            of mastering Data Structures
            and Algorithms (DSA) as you venture
            towards becoming a
            Proficient Developer or Data Scientist. ?
        </p>
        <p>Comprehensive DSA Mastery: Learn essential data structures,
            algorithms, and advanced techniques for
            optimized coding.
            Programming Proficiency: Develop a strong foundation
            in programming languages to tackle coding challenges
            with confidence.
        </p>
        <p>Real-World Application: Engage in hands-on projects
            and build remarkable applications to 
            apply your skills.
            Versatility in Tech Stacks: Choose
            full-stack development,
            data science or specialize in specific technology
            stacks like MERN, Java, Python or Machine Learning.
        </p>
    </div>
</body>

</html>

Output:

Example: The following code demonstrates another Flexbox example.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Half Page Background Image</title>
    <style>
        body,
        html {
            margin: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .half-page-bg {

            /* Flex item to take 50% of the parent height */
            flex: 0 0 50%;
            background-image:
                url(
'https://media.geeksforgeeks.org/wp-content/uploads/20210511160813/g4g.jpg');
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
        }

        .half-page-color {
            flex: 0 0 50%;
            background-color: gray;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="half-page-bg"></div>
    <div class="half-page-color">
        <h3>Creating half page background image using flexbox</h3>
    </div>
</body>

</html>

Output:

How to Use Custom Percentages in Padding in Tailwind CSS?

rajveer810214

Improve

Article Tags :