DOCSEARCHbyAlgolia
Submit Docs

CSS Pills

website·Indexed 29 days ago

https://onebeyond.github.io/css-pills

A collection of concise guides and tutorials for learning CSS, covering topics such as the Box Model, HSL color format, z-index, flow layout, position fixed, and logical properties.

Tokens
2.9K
Snippets
13
Records
24
Agent score
75%

What's inside CSS Pills

  1. Control element stacking order with z-index

    z-index is a CSS property used to determine which element appears on top of another when they overlap. Elements with a higher z-index are displayed in front of elements with a lower value. By default, elements have a z-index of auto, and their stacking order is determined by their order in the HTML document flow. The property accepts any integer (positive or negative) within the range of a 32-bit signed integer (±2,147,483,647).

  3. Understand the CSS Box Model components

    The CSS Box Model defines how every HTML element is rendered as a rectangular box. It consists of four concentric layers that determine the element's total space on the page:

    1. Content: The innermost area where text or images reside.
    2. Padding: The transparent space between the content and the border.
    3. Border: The line wrapping the padding and content.
    4. Margin: The outermost transparent space that separates the element from neighboring elements.

  4. Understand CSS logical properties for internationalization

    Logical properties allow you to define styles based on the logical structure of content rather than physical directions. While traditional properties like margin-top or padding-left are fixed to physical directions, logical properties adapt based on the writing-mode of the element. This is primarily used for internationalization (i18n), ensuring layouts remain consistent across left-to-right (LTR), right-to-left (RTL), and vertical writing modes.

  5. Manage z-index values using CSS variables

    To maintain a clear overview of the stacking order and simplify debugging, define z-index values as CSS variables in the :root selector. This centralizes the depth management of the application.
    :root {
  --dropdown: 100;
  --modal-backdrop: 200;
  --modal-content: 300;
  --popover: 400;
}

.dropdown {
  position: relative;
  z-index: var(--dropdown);
}

  6. Requirements for z-index to take effect

    The z-index property only works on elements that have a specified position value other than the default static. It requires the element to be relative, absolute, fixed, or sticky. If an element has position: static (the default), z-index will be ignored.
    /* This works */
.box-with-position {
  position: relative;
  z-index: 1;
}

/* This does NOT work */
.box-without-position {
  z-index: 3;
}

  7. Best practices and caveats for z-index

    Follow these guidelines to avoid layout and accessibility issues:

    • Avoid negative values: Negative z-index can place elements behind the body or html tags, making them inaccessible.
    • Avoid arbitrary high values: Do not use extremely high numbers randomly. Use a specific, recognizable constant (like 9999) only for elements that must absolutely be on top of everything else.
    • Prefer HTML structure: Whenever possible, rely on the natural order of HTML elements to handle stacking rather than relying on z-index.

  8. Implement fixed positioning in CSS

    The position: fixed value removes an element from the normal document flow and positions it relative to the viewport (the browser window). Because it is relative to the viewport, the element remains in the same position even when the page is scrolled. Its final position is determined by the top, right, bottom, and left properties, or the inset shorthand. If no anchor points are provided, the element defaults to the top-left corner of the viewport. Using position: fixed always creates a new stacking context.

  10. Override `box-sizing` for third-party components

    When using a global inherit reset, you can revert a specific third-party component to the standard content-box behavior by targeting its top-level container. This ensures the component renders as the original author intended without affecting the rest of your application.
    .third-party-component {
  box-sizing: content-box;
}

  11. Configure text flow with the writing-mode property

    The writing-mode property determines the direction in which text flows within an element. This property changes how the 'inline' and 'block' axes are mapped to the physical X and Y axes of the screen.
    .values {
  /* Horizontal flow, top-to-bottom */
  writing-mode: horizontal-tb;
  /* Vertical flow, right-to-left */
  writing-mode: vertical-rl;
  /* Vertical flow, left-to-right */
  writing-mode: vertical-lr;
}

  12. Change element flow behavior using the display property

    You can manipulate the default flow layout by changing an element's display property.

    • Use display: block to make an inline element behave like a block element (stacking vertically).
    • Use display: inline-block to create a hybrid behavior: the element flows horizontally like an inline element, but accepts height and width properties like a block element.
    /* Transform an inline element into a block element */
a.nav-link {
  display: block;
}

/* Transform an inline element into an inline-block element */
span.icon {
  display: inline-block;
}