CSS Tutorials

CSS - Complete working code for positioning elements

Complete Working Code for positioning elements in CSS

<!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>
        /* Styles for the static positioning */
        .static-box {
            width: 200px;
            height: 50px;
            background-color: lightblue;
            margin: 10px;
        }

        /* Container to demonstrate relative and absolute positioning */
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: lightgreen;
            margin: 10px;
        }

        /* Relative positioning */
        .relative-box {
            position: relative;
            left: 20px;
            top: 10px;
            width: 200px;
            height: 50px;
            background-color: lightcoral;
        }

        /* Absolute positioning */
        .absolute-box {
            position: absolute;
            top: 50px;
            right: 50px;
            width: 100px;
            height: 50px;
            background-color: lightsalmon;
        }

        /* Fixed positioning */
        .fixed-box {
            position: fixed;
            bottom: 10px;
            right: 10px;
            width: 200px;
            height: 50px;
            background-color: lightgoldenrodyellow;
        }

        /* Sticky positioning */
        .sticky-box {
            position: sticky;
            top: 0;
            width: 100%;
            background-color: lightpink;
            padding: 10px;
            border: 1px solid black;
        }

        /* Additional content to demonstrate scrolling */
        p {
            margin: 10px;
            height: 800px; /* Large height to enable scrolling */
        }
    </style>
</head>
<body>
    <!-- Static positioning element -->
    <div class="static-box">This box is statically positioned.</div>

    <!-- Container for relative and absolute positioned elements -->
    <div class="container">
        <div class="relative-box">This box is relatively positioned.</div>
        <div class="absolute-box">This box is absolutely positioned.</div>
    </div>

    <!-- Fixed positioning element -->
    <div class="fixed-box">This box is fixedly positioned.</div>

    <!-- Sticky positioning element -->
    <div class="sticky-box">This box will stick to the top of the page when you scroll.</div>

    <!-- Additional content to demonstrate scrolling effect -->
    <p>Scroll down the page to see the sticky and fixed position effects.</p>
</body>
</html>

Explanation of the Code

Static Positioning: Shown as a pale blue box that flows across documents as usual.

Relative Positioning: A bright coral box in a green container that has been shifted from its usual location is used to demonstrate this technique.

The concept of absolute positioning is exemplified by using a light salmon box that is placed exactly within the green container.

Fixed Positioning: Shown by a bright yellow box with a goldenrod color that remains fixed in the viewport's lower right corner.

Sticky Positioning: Shown by a bright pink box at the top that becomes fixed as you scroll past its original place.

logo

CSS

Beginner 5 Hours

Complete Working Code for positioning elements in CSS

<!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>
        /* Styles for the static positioning */
        .static-box {
            width: 200px;
            height: 50px;
            background-color: lightblue;
            margin: 10px;
        }

        /* Container to demonstrate relative and absolute positioning */
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: lightgreen;
            margin: 10px;
        }

        /* Relative positioning */
        .relative-box {
            position: relative;
            left: 20px;
            top: 10px;
            width: 200px;
            height: 50px;
            background-color: lightcoral;
        }

        /* Absolute positioning */
        .absolute-box {
            position: absolute;
            top: 50px;
            right: 50px;
            width: 100px;
            height: 50px;
            background-color: lightsalmon;
        }

        /* Fixed positioning */
        .fixed-box {
            position: fixed;
            bottom: 10px;
            right: 10px;
            width: 200px;
            height: 50px;
            background-color: lightgoldenrodyellow;
        }

        /* Sticky positioning */
        .sticky-box {
            position: sticky;
            top: 0;
            width: 100%;
            background-color: lightpink;
            padding: 10px;
            border: 1px solid black;
        }

        /* Additional content to demonstrate scrolling */
        p {
            margin: 10px;
            height: 800px; /* Large height to enable scrolling */
        }
    </style>
</head>
<body>
    <!-- Static positioning element -->
    <div class="static-box">This box is statically positioned.</div>

    <!-- Container for relative and absolute positioned elements -->
    <div class="container">
        <div class="relative-box">This box is relatively positioned.</div>
        <div class="absolute-box">This box is absolutely positioned.</div>
    </div>

    <!-- Fixed positioning element -->
    <div class="fixed-box">This box is fixedly positioned.</div>

    <!-- Sticky positioning element -->
    <div class="sticky-box">This box will stick to the top of the page when you scroll.</div>

    <!-- Additional content to demonstrate scrolling effect -->
    <p>Scroll down the page to see the sticky and fixed position effects.</p>
</body>
</html>

Explanation of the Code

Static Positioning: Shown as a pale blue box that flows across documents as usual.

Relative Positioning: A bright coral box in a green container that has been shifted from its usual location is used to demonstrate this technique.

The concept of absolute positioning is exemplified by using a light salmon box that is placed exactly within the green container.

Fixed Positioning: Shown by a bright yellow box with a goldenrod color that remains fixed in the viewport's lower right corner.

Sticky Positioning: Shown by a bright pink box at the top that becomes fixed as you scroll past its original place.

Related Tutorials

Frequently Asked Questions for CSS

Content, padding, border, and margin make up the box model.

Relative moves from original position; absolute positions relative to nearest positioned ancestor.

id is unique; class can be reused.

visibility hides but keeps space; display removes element from layout.

Minify files, reduce specificity, and remove unused styles.

Overrides all other declarations, regardless of specificity.

Use margin: auto or flexbox/grid techniques.

Allow responsive design by applying styles based on screen size or device.

Define relationships between selectors: descendant ( ), child (>), adjacent (+), sibling (~).

Tools like SASS or LESS add features like variables and nesting to CSS.

Targets part of an element, like ::before or ::after.

Use @import "filename.css"; at the top of the file.

Controls stacking order of overlapping elements.

Forces a property to inherit value from parent.

Static — not affected by top, bottom, left, or right.

Use universal selector * or define styles in body/root.

em is relative to parent; rem is relative to root element.

Inline, internal (embedded), and external CSS.

A layout model for arranging elements in rows or columns with flexible sizing.

Targets elements in a specific state, like :hover or :nth-child().

Use fluid layouts, media queries, and relative units.

CSS styles HTML elements to control layout, color, fonts, and responsiveness.

Reusable custom property values, declared with --var-name.

Determines which rule applies when multiple rules target the same element.

Performs calculations to dynamically set CSS property values.

line

Mail us :

Address :

India
  • Facebook_logo
  • Instagram_logo
  • Linkedin_logo
  • X-twitter_logo
  • Youtube_logo
  • Pinterest_logo

Sub Categories

Copyrights © 2024 letsupdateskills All rights reserved