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:

<!DOCTYPE html>
<html>
<head>
  <title>Display and Positioning</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    .inline-box {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin: 5px;
      text-align: center;
      line-height: 100px;
    }

    .relative-box {
      position: relative;
      top: 20px;
      left: 20px;
      background-color: lightgreen;
      padding: 10px;
      margin-top: 20px;
    }

    .container {
      position: relative;
      height: 150px;
      border: 2px solid black;
      margin-top: 30px;
    }

    .absolute-box {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: pink;
      padding: 10px;
    }

    .fixed-box {
      position: fixed;
      bottom: 10px;
      right: 10px;
      background-color: orange;
      padding: 10px;
    }
  </style>
</head>
<body>

  <h2>Display: Inline-Block</h2>
  <div class="inline-box">Box 1</div>
  <div class="inline-box">Box 2</div>
  <div class="inline-box">Box 3</div>

  <div class="relative-box">
    This box is relatively positioned.
  </div>

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

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

</body>
</html>