Lecture_7_CSS Positioning & Display Properties

Lesson 3: CSS Positioning & Display Properties

Objective: Learn how to position elements and control their display properties.

• Duration: 80 minutes

• Topics Covered:

  1. CSS Display Property

     • Block, inline, and inline-block elements.

     • Controlling visibility using display: none;.

  2. CSS Positioning

     • Static, relative, absolute, fixed, sticky positioning.

     • How positioning affects element flow.

  3. Z-index & Layering

     • Managing element stacking with z-index.

  4. CSS Float & Clear

     • Using float to create basic layouts.

     • Clearing floated elements.

• Student Activity:

  • Create a simple layout with a header, two-column content, and a footer using float and clear. Experiment with positioning different elements using relative, absolute, and fixed properties.

• Homework/Practice:

  • Build a sidebar layout using float. Apply relative positioning to the sidebar and absolute positioning to a menu button inside the sidebar.