搜索结果被父级navbar导航栏截断，z-index值更高仍被遮挡问题

• 直接原因：.navbar、.navul两个父级容器均设置了overflow: hidden属性，该属性会强制裁剪所有超出容器边界的子元素内容，规则优先级高于子元素的z-index配置，因此哪怕搜索结果框的z-index远高于导航栏，超出导航栏范围的部分依然会被截断。
• 潜在问题：搜索结果框#result采用绝对定位，但它的直接父容器.search-container没有设置position: relative，会导致结果框的定位基准变为最近的非static定位祖先元素，容易出现位置偏移的问题。

按照以下步骤修改CSS代码即可解决问题：

1. 移除两个父容器的overflow: hidden属性，改用伪元素清除浮动（原overflow: hidden大概率是为了清除导航项float: left带来的高度塌陷问题，用伪元素方案可以避免裁剪内容）

.navbar {
  margin: 0;
  padding: 0;
  /* 删除原有 overflow: hidden 配置 */
  width: 100%;
  backdrop-filter: blur(20px); 
  background: rgba(255, 255, 255, 0.1); 
  position: fixed; 
  z-index: 1000; /* 调高导航栏层级，避免整体被下方内容覆盖 */
}
/* 新增伪元素清除.navbar浮动 */
.navbar::after {
  content: "";
  display: block;
  clear: both;
}

.navul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-left: 2%;
  padding-right: 2%;
  position: relative;
  /* 删除原有 overflow: hidden 配置 */
}
/* 新增伪元素清除.navul浮动 */
.navul::after {
  content: "";
  display: block;
  clear: both;
}

2. 给搜索容器添加相对定位，保证搜索结果框的定位基准正确：

.search-container {
  position: relative;
}

3. 可选优化：如果需要搜索结果框和输入框宽度对齐，将#result的宽度改为100%：

#result {
   position: absolute;
   width: 100%; /* 替换原有40%配置，和输入框宽度保持一致 */
   max-width:870px;
   cursor: pointer;
   overflow-y: auto;
   max-height: 400px;
   box-sizing: border-box;
   z-index: 1001;
}

内容的提问来源于stack exchange，提问作者lasserrebreno