4. CSS Display, Positioning & Layout Control

display: none/block/inline, position: static/relative/absolute/fixed/sticky & overflow

Module 1: CSS Display Property

The display property specifies if and how an element is displayed.

Core Theory & Principles

display: block takes up full width and starts on a new line.
display: inline takes up only necessary width without starting a new line.
display: inline-block allows setting width and height while staying inline.
display: none completely hides an element from layout.

Practical Key Takeaways

Mastering CSS Display Property builds fundamental development capability. Review practical code and outputs carefully.

💻 Practical Code Example - CSS Display Property

<div style="background: rgb(30, 41, 59); padding: 15px; border-radius: 8px;">
    <span style="display: inline-block; width: 120px; padding: 10px; background: rgb(56, 189, 248); color: rgb(15, 23, 42); font-weight: bold; text-align: center; border-radius: 6px; margin: 4px;">Box 1</span>
    <span style="display: inline-block; width: 120px; padding: 10px; background: rgb(74, 222, 128); color: rgb(15, 23, 42); font-weight: bold; text-align: center; border-radius: 6px; margin: 4px;">Box 2</span>
</div>

📤 Expected Output / Browser Rendered Result:

Output Verified Cleanly.

Module 2: CSS Position Property (relative, absolute, fixed, sticky)

Specifies the type of positioning method used for an element.

Core Theory & Principles

static: default positioning following normal document flow.
relative: positioned relative to its normal position.
absolute: positioned relative to nearest positioned ancestor.
fixed: positioned relative to viewport; stays in place during scroll.
sticky: toggles between relative and fixed based on scroll offset.

Practical Key Takeaways

Mastering CSS Position Property (relative, absolute, fixed, sticky) builds fundamental development capability. Review practical code and outputs carefully.

💻 Practical Code Example - CSS Position Property (relative, absolute, fixed, sticky)

<div style="position: relative; width: 100%; height: 120px; background: rgb(30, 41, 59); border-radius: 8px; border: 1px solid rgb(51, 65, 85);">
    <div style="position: absolute; bottom: 10px; right: 10px; background: rgb(244, 114, 182); color: rgb(15, 23, 42); padding: 6px 14px; font-weight: bold; border-radius: 6px;">
        Absolute Positioned (Bottom Right)
    </div>
</div>

📤 Expected Output / Browser Rendered Result:

Output Verified Cleanly.