CSS 定位技巧：避免 overflow: hidden 隐藏子元素

如果你希望基于父级定位的元素不被父级或爷爷级的 'overflow: hidden' 属性隐藏，可以考虑使用 'position: fixed' 或 'position: absolute' 定位。

1. 使用 'position: fixed' 定位：
   • 将父级或爷爷级的 'overflow: hidden' 移除；
   • 将需要基于父级定位的元素的 'position' 属性设置为 'fixed'；
   • 使用 'top'、'right'、'bottom'、'left' 属性来定位元素。

.parent {
  /* 移除 overflow: hidden */
}

.child {
  position: fixed;
  top: 0;
  left: 0;
  /* 其他定位样式 */
}

2. 使用 'position: absolute' 定位：
   • 将父级或爷爷级的 'overflow: hidden' 移除；
   • 将需要基于父级定位的元素的 'position' 属性设置为 'absolute'；
   • 使用 'top'、'right'、'bottom'、'left' 属性来定位元素。

.parent {
  /* 移除 overflow: hidden */
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  /* 其他定位样式 */
}

请注意，使用 'position: fixed' 或 'position: absolute' 定位会脱离正常的文档流，可能会对布局产生其他影响，需要根据具体情况进行调整。