Introduction

CSS display and position properties control how elements are shown and placed on a web page. These properties are essential for creating layouts, aligning elements, and building modern web designs.

In this lesson, you will learn how different display types work and how positioning helps control element placement.

What You’ll Learn

• CSS display property
• Block, inline, inline-block
• Display none vs visibility hidden
• CSS position property
• Types of positioning
• Real-world usage

🔹 CSS Display Property

The display property defines how an element is displayed on the page.

📦 Block Elements

Block elements take full width and start on a new line.

Examples:

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

Example:

div {
  display: block;
}

Behavior:

👉 Each element appears on a new line.

🔹 Inline Elements

Inline elements do not start on a new line and take only required width.

Examples:

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

Example:

span {
  display: inline;
}

🔹 Inline-Block

Combines features of both block and inline.

div {
  display: inline-block;
  width: 150px;
}

👉 Allows width/height + stays inline.

🔹 Display None

div {
  display: none;
}

👉 Element is completely removed from layout.

🔹 Visibility Hidden

div {
  visibility: hidden;
}

👉 Element is hidden but space remains.

🔹 Flex (Important 🔥)

.container {
  display: flex;
}

👉 Used for modern layouts and alignment.

🔹 CSS Position Property

The position property defines how an element is positioned.

🔹 Relative Position

div {
  position: relative;
  top: 10px;
}

👉 Moves relative to its original position.

🔹 Absolute Position

div {
  position: absolute;
  top: 0;
  left: 0;
}

👉 Positioned relative to nearest positioned parent.

🔹 Fixed Position

div {
  position: fixed;
  top: 0;
}

👉 Stays fixed on screen (navbar example).

🔹 Sticky Position

div {
  position: sticky;
  top: 0;
}

👉 Sticks when scrolling.

🔹 Sticky Position

div {
  position: sticky;
  top: 0;
}

👉 Sticks when scrolling.

🔹 Z-Index (Layering 🔥)

div {
  position: absolute;
  z-index: 10;
}

👉 Higher value = appears on top.

🔹 Display vs Position (Difference)

🔹 Real-Life Examples

• Navigation bars → fixed
• Popups → absolute
• Cards layout → flex
• Sticky header → sticky

🔹 Important Notes

• Use flex for layouts
• Avoid overusing absolute positioning
• Always set parent for absolute elements
• Use z-index carefully

🔹 Common Mistakes

• Forgetting position: relative on parent
• Misusing absolute positioning
• Confusing display and position
• Overlapping elements incorrectly

🔹 Best Practices

• Use flexbox for layout
• Keep positioning simple
• Avoid unnecessary complexity
• Test on different screen sizes

🔹 Practice Tasks

• Task 1: Create block and inline elements.
• Task 2: Use inline-block for layout.
• Task 3: Hide elements using display and visibility.
• Task 4: Position elements using relative and absolute.
• Task 5: Create a fixed navbar.

FAQs

What is display property?

It controls how elements appear on the page.

What is position property?

It controls placement of elements.

Difference between display none and visibility hidden?

Display removes element, visibility hides it.

Conclusion

CSS display and position properties are essential for building layouts and controlling element placement. By understanding how elements behave and how positioning works, you can create flexible and responsive designs.

👉 In the next tutorial, you will learn about CSS Flexbox for advanced layouts.