CSS Structural and Display Properties

In this module, we will delve into essential CSS structural properties such as position, visibility, and index. These properties play a crucial role in defining the layout and behavior of elements within a web page.
Lets look at the various CSS properties that are essential for structuring and fine-tuning the layout of web pages. These properties offer granular control over how elements are displayed, positioned, and behave within the user interface. From managing the fit and position of images to dictating element visibility and stacking order, the knowledge of these properties will empower you to create more responsive, visually appealing, and user-friendly web designs.
  • position: Determines the positioning method of an element within the document. Values like static, relative, absolute, fixed, and sticky dictate how an element is positioned and interacts with the flow of the document.
  • visibility: Controls the visibility of an element without removing it from the document flow. Unlike display: none, visibility: hidden makes an element invisible while still taking up space in the layout.
  • object-fit: Determines how the content of a replaced element, like an img or video, should be resized to fit its container. It can be set to values like fill, contain, cover, none, or scale-down, allowing control over how images are scaled and displayed within their bounds.
  • object-position: Works with object-fit to specify the positioning of the object within its box. Values are similar to those of the background-position property, allowing the object to be aligned as desired within its container.
  • overflow: Specifies what should happen if content overflows an element's box. It can be set to visible, hidden, scroll, or auto, offering control over the visibility of overflow content and the presence of scrollbars.
  • overscroll-behavior: Controls the browser's behavior when reaching the boundary of a scrolling area. It can prevent the page from bouncing on scroll or stop scroll chaining to parent elements, with values like auto, contain, or none.
  • top/right/bottom/left: When used with positioned elements (position property other than static), these properties determine the exact placement of an element from the respective sides of its nearest positioned ancestor or the viewport.
  • z-index: Specifies the stack order of positioned elements. Elements with a higher z-index cover those with a lower index, allowing for control over the overlap of elements on the web page.
Next lesson - Position
In this lesson, we will delve into how to position HTML elements using Tailwind CSS's position utility classes. Tailwind provides a suite of utility classes designed for precisely controlling the positioning of elements. These include classes for static, fixed, absolute, relative, and sticky positioning.