CSS Display, Positioning, and Layout Basics

# CSS Display & Positioning

1. Introduction #

2. Learning Objectives #

• Understand block, inline, and inline-block.

• Master position: relative, absolute, fixed, and sticky.

• Use z-index to stack overlapping elements.

3. Detailed Explanations #

The Display Property #

• block: Takes up the full width available. Starts on a new line. (e.g., <div>, <p>)

• inline: Takes up only as much width as necessary. Does not start on a new line. Cannot have width/height. (e.g., <span>, <a>)

• inline-block: Like inline, but allows you to set width and height!

• none: Hides the element entirely from the layout.

.box {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
}

.hidden {
    display: none; /* Element is gone */
}

Static vs Relative Positioning #

• static: The default. Elements flow naturally.

• relative: Elements flow naturally, BUT you can nudge them using top, right, bottom, left.

.nudged-box {
    position: relative;
    top: -10px; /* Moves it UP 10px from where it should be */
}

Absolute Positioning #

.container {
    position: relative; /* This acts as the anchor */
    width: 300px; height: 300px;
}

.badge {
    position: absolute;
    top: 0;
    right: 0; /* Pins to the top right of .container */
}

Fixed and Sticky Positioning #

• fixed: Pins to the browser window. Survives scrolling.

• sticky: Acts like relative until you scroll past it, then it acts like fixed.

.header {
    position: sticky;
    top: 0; /* Sticks to the very top of the screen when scrolled */
    background: white;
    z-index: 100; /* Ensures it stays above other content */
}

4. Mini Project: Sticky Navbar #

<nav class="navbar">
    <div class="logo">MyBrand</div>
    <div class="links">
        <a href="#">Home</a>
        <a href="#">About</a>
    </div>
</nav>
<div class="content" style="height: 2000px;">Scroll down!</div>

.navbar {
    position: sticky;
    top: 0;
    background-color: #1e293b;
    color: white;
    padding: 15px 30px;
    display: block; /* We'll upgrade this to flexbox next chapter! */
    z-index: 50; /* Stays on top */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.navbar a {
    color: white;
    text-decoration: none;
    display: inline-block;
    margin-left: 20px;
}

5. MCQs #

6. Summary #