如何让绝对定位的search-bar相对phone父元素居中并解决溢出问题

一、让search-bar始终相对于phone居中 #

1. 给父元素phone设置position: relative——这是绝对定位子元素以父元素为定位基准的必要条件
2. 给子元素search-bar设置绝对定位，通过transform实现自适应居中：

.phone {
  position: relative;
  /* 保留你原有的其他样式，比如宽高、布局属性等 */
}

.search-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 保留你原有的其他样式，比如宽高、背景等 */
}

这个方法不需要提前知道search-bar的宽高，不管父元素phone在屏幕的哪个位置，search-bar都会稳稳居中在phone内部。

二、解决overflow-y:hidden导致search-bar被截断的问题 #

问题原因 #

CSS的overflow是 shorthand 规则：只要其中一个轴（x或y）设置了hidden/scroll/auto，另一个轴如果显式设为visible会被强制覆盖成auto，所以你设置的overflow-x: visible根本不会生效，超出父元素的部分自然会被截断。

解决办法：嵌套内层容器拆分溢出控制 #

把需要垂直隐藏溢出的内容放到一个内层容器里，让内层容器处理垂直溢出，phone本身不设置任何overflow属性：

<div class="phone">
  <!-- 内层容器：负责处理内部内容的垂直溢出 -->
  <div class="phone-inner">
    <!-- 这里放phone原本需要隐藏垂直溢出的内容，比如聊天列表、文本内容等 -->
  </div>
  <!-- search-bar作为phone的直接子元素，不受内层容器的overflow限制 -->
  <div class="search-bar">...</div>
</div>

对应的CSS：

.phone {
  position: relative;
  /* 去掉所有overflow相关设置 */
}

.phone-inner {
  height: 100%;
  overflow-y: hidden;
  /* 只对内层内容的垂直溢出做隐藏，不影响外层phone的水平方向 */
}

.search-bar {
  /* 保留之前的居中样式 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

这样search-bar作为phone的直接子元素，不受内层容器的overflow-y:hidden影响，超出phone的部分就能正常显示了。

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