CSS: Display & Positioning

Display Property

The display property determines how an element is displayed:

• block: The element takes up the full width available.
• inline: The element takes up only as much width as necessary.
• inline-block: Combines block and inline behavior.
• none: Hides the element.
• flex: Enables flexbox layout.
• grid: Enables grid layout.

Position Property

The position property specifies the positioning method for an element:

• static: Default positioning (normal flow).
• relative: Positioned relative to its normal position.
• absolute: Positioned relative to its nearest positioned ancestor.
• fixed: Positioned relative to the viewport.
• sticky: Toggles between relative and fixed based on scroll position.

Example: Display & Positioning

/* Example */
div {
    display: block;
    position: relative;
    top: 20px;
    left: 10px;
}
        

This example positions a div element relative to its normal position.

Practice

Try experimenting with display and positioning properties:

• Change the display property to inline or flex.
• Use position: absolute to place an element precisely.
• Combine position: sticky with scrolling behavior.

Continue Learning

• Next: CSS Responsive Design