Apple Liquid Glass CSS

apple-liquid-glass-fancy.css

/*
 * ===================================================================
 * Main Glass Container Styles
 * This block controls the fixed element that holds the glass effect.
 * ===================================================================
 */

/* Rule for the parent container that is fixed on the page. */
.fixed-glass-container {

  /* * This is the most important rule. It removes the container from the normal
   * page flow and fixes its position relative to the browser window.
   * The container will not scroll with the page.
   * The `!important` flag is used to ensure this rule overrides any
   * conflicting styles from the Divi theme.
   */
  position: fixed !important;

  /*
   * These two rules position the top-left corner of the container at the
   * exact center of the screen (50% from the top, 50% from the left).
   */
  top: 50%;
  left: 50%;

  /*
   * This is the second half of the centering trick. It shifts the container
   * back up by 50% of its own height and back left by 50% of its own width.
   * The result is that the container is perfectly centered, both
   * horizontally and vertically, on the screen.
   */
  transform: translate(-50%, -50%);

  /*
   * This sets the stacking order of the element. A high value like 999
   * ensures that this container will appear on top of almost all other
   * content on the page.
   */
  z-index: 999;
}


/*
 * ===================================================================
 * Divi Builder Content Wrapper
 * This rule targets a standard Divi element to adjust its layering.
 * ===================================================================
 */
.et_builder_inner_content {

  /* * This sets the stacking order for Divi's main content wrapper.
   * A z-index of 3 suggests it's designed to sit above some background
   * elements (with z-index 1 or 2) but below foreground or overlay
   * elements (like our .fixed-glass-container with z-index 999).
   */
  z-index: 3;

  /*
   * This rule makes the element inherit its 'position' property (like 'relative' or 'static')
   * from its direct parent element in the Divi structure. This is often used
   * to ensure consistent layout behavior and prevent the element from creating
   * a new, unexpected stacking context.
   */
  position: inherit;
}