Layout and Positioning Properties in CSS

1. display

• Specifies how an element is displayed on the page.
• Values: block, inline, inline-block, flex, grid, none, etc.

2. position

• Defines how an element is positioned in the document.
• Values: static, relative, absolute, fixed, sticky.

3. top, right, bottom, left

• Used with position property values relative, absolute, fixed, and sticky to position an element.
• Specifies the offset from the respective edge of the containing element.

4. z-index

• Controls the stack order of positioned elements (elements with position set to relative, absolute, fixed, or sticky).
• Higher values are in front of lower values.

5. float

• Moves an element to the left or right, allowing text and inline elements to wrap around it.
• Values: left, right, none.

6. clear

• Specifies on which sides of an element floating elements are not allowed.
• Values: left, right, both, none.

7. overflow

• Determines what happens when content overflows an element's box.
• Values: visible, hidden, scroll, auto.

8. visibility

• Specifies whether an element is visible or hidden, but still takes up space in the layout.
• Values: visible, hidden, collapse (for table rows/columns).

9. clip

• Clips an element to a specific rectangular area (deprecated, use clip-path instead).
• Values: rect(top, right, bottom, left).

10. object-fit

• Defines how the content of a replaced element (e.g., <img>, <video>) should fit within its container.
• Values: fill, contain, cover, none, scale-down.

11. object-position

• Specifies the alignment of a replaced element's content within its container.
• Values: left, right, center, top, bottom, etc.