Intro:
CSS layout properties like position and display often confuse developers, especially when elements behave unexpectedly. In this post, we'll break down these concepts with easy-to-understand visuals and working CodePen examples.

🧱 CSS display: Controlling Box Behavior

The display property defines how an element is rendered in the flow of the document. Here's a breakdown of the most common display types:

Display Type Behavior Description Example Use Case
block Starts on a new line, takes up full width
,
inline Flows with text, only takes up as much width as needed ,
inline-block Inline behavior with block styling support ,
flex Enables 1D flexible layout Navbars, content rows
grid Enables 2D grid layout with rows and columns Dashboards, galleries
none Element is hidden, removed from layout flow Toggle visibility dynamically

🔹 Live Example: CSS display

Check this CodePen to explore how different display values affect layout:

📍 CSS position: Controlling Placement

The position property defines how an element is placed in the document. Each type changes how the element behaves in relation to the page and its parents.

Position Behavior When to Use
static Default. Follows normal flow. Most elements
relative Shifts the element without removing it from the flow. Small adjustments
absolute Removed from flow; positioned relative to nearest non-static ancestor Tooltips, floating panels
fixed Positioned relative to viewport. Stays fixed during scroll. Sticky navbars, floating buttons
sticky Acts relative until scroll threshold, then fixed. Sticky headers or sidebars

🔹 Live Example: CSS position

Visualize how position affects layout here:

🪩 Key Takeaways

  • Use display to define layout model (flex, grid, block, etc.)
  • Use position to control element placement (absolute, fixed, relative, etc.)
  • position: absolute depends on a non-static ancestor to anchor itself
  • display: none removes element from layout; visibility: hidden keeps the space

🔧 Experiment On Your Own

Try tweaking the CodePens to understand how different values affect layout in real time. Getting hands-on is the fastest way to learn!

Have questions or want deeper dives into Flexbox or Grid? Let me know in the comments!