如何通过CSS调整发票中公司名称字段的显示位置

解决方案思路 #

由于公司名字段仅在填写时以包含<strong>Company name</strong>的div形式出现在.additional-information容器下，我们可以利用CSS的:has()选择器精准定位该div，通过绝对定位将其移动到姓名+地址区域上方，同时消除原有定位样式的干扰。

实现代码 #

/* 定位包含目标文本的公司名字段div */
.additional-information > div:has(strong:contains('Company name')) {
  position: absolute;
  /* 根据你的发票模板实际布局调整坐标，示例为姓名地址区域上方位置 */
  top: 40px;
  left: 30px;
  /* 确保层级高于姓名地址区域，防止被遮挡 */
  z-index: 5;
}

/* 重置原有nth-of-type样式对该div的影响 */
.additional-information > div:has(strong:contains('Company name')) {
  left: auto;
  top: auto;
}

兼容性备选方案 #

若浏览器不支持:contains()选择器，可通过结构特征定位（假设公司名字段的第一个子元素是<strong>Company name</strong>）：

.additional-information > div:has(> strong:first-child) {
  position: absolute;
  top: 40px;
  left: 30px;
  z-index: 5;
}

.additional-information > div:has(> strong:first-child) {
  left: auto;
  top: auto;
}

优化提示 #

• 务必根据发票模板的实际布局调整top和left的具体数值，确保公司名准确显示在姓名+地址区域上方。
• 如果姓名+地址区域有固定容器类（如.customer-info），可通过CSS变量实现更精准的定位：

  /* 先给姓名地址容器设置变量（若模板允许） */
  .customer-info {
    --info-top: 60px;
    --info-left: 30px;
  }
  
  .additional-information > div:has(strong:contains('Company name')) {
    position: absolute;
    top: calc(var(--info-top) - 25px); /* 比姓名地址区域高25px */
    left: var(--info-left);
    z-index: 5;
  }
  

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