Display and Positioning

Two very important concepts in CSS layout are:

• Display → Controls how an element behaves in the layout.
• Positioning → Controls where an element appears on the page.

If the Box Model controls spacing,

then Display and Positioning control layout and placement.

PART 1: The display Property

The display property decides how an element behaves in relation to other elements.

1️⃣ Block Elements (display: block)

Block elements:

• Take up the full width available
• Start on a new line
• Stack vertically

Examples:

• <div>
• <p>
• <h1>

Example:

div {
  display: block;
}

Even if you set a width smaller than the screen, block elements still start on a new line.

2️⃣ Inline Elements (display: inline)

Inline elements:

• Do NOT start on a new line
• Only take up as much width as needed
• Cannot set width and height properly

Examples:

• <span>
• <a>
• <strong>

Example:

span {
  display: inline;
}

Inline elements sit next to each other.

3️⃣ Inline-Block (display: inline-block)

This is a combination of block and inline.

Inline-block elements:

• Sit next to each other (like inline)
• Allow width and height (like block)

Example:

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

Very useful for horizontal layouts.

4️⃣ None (display: none)

Removes the element completely from the page.

.hidden {
  display: none;
}

The element disappears and takes up no space.

5️⃣ Flex (display: flex)

Used for modern layouts.

.container {
  display: flex;
}

This makes child elements align in a row by default.

Example:

.container {
  display: flex;
  gap: 10px;
}

PART 2: Positioning in CSS

The position property controls where an element appears.

There are five main types:

1. static (default)
2. relative
3. absolute
4. fixed
5. sticky

1️⃣ Static (Default)

div {
  position: static;
}

• This is the default.
• The element follows normal page flow.
• You cannot use top, left, right, bottom.

2️⃣ Relative

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

• Moves relative to its original position.
• The space it originally occupied is still reserved.

Think: "Move it slightly from where it normally sits."

3️⃣ Absolute

.box {
  position: absolute;
  top: 0;
  right: 0;
}

• Removed from normal document flow.
• Positioned relative to the nearest positioned ancestor.
• If no positioned parent exists, it uses the whole page.

Important:

If you want absolute inside a container:

.container {
  position: relative;
}

Then the absolute child will stay inside that container.

4️⃣ Fixed

.box {
  position: fixed;
  bottom: 0;
  right: 0;
}

• Stays fixed on the screen
• Does not move when scrolling

Used for:

• Floating buttons
• Navigation bars

5️⃣ Sticky

.box {
  position: sticky;
  top: 0;
}

• Acts like relative until scrolling reaches a point
• Then sticks like fixed

Used for:

• Sticky headers

Compilation of Entire Code

Below is the full working example: