css - 如何解决公告栏造成的累积布局偏移？

Question

我的电子商务网站 (Shopify) 有一个公告栏，它会将页面的其余内容向下推送，从而导致 CLS 问题。

我已经在论坛和文章中搜索了一段时间，但是关于解决 CLS 的所有建议都是超级通用的（“确保不要出现弹出窗口！”），缺乏实际实施的指南。

公告栏的高度在所有设备上都是固定的 46 像素，所以理论上这应该很容易通过在主题文件中为其分配空间来解决，但我不知道该怎么做。

Answer 1

这应该可以解决问题！将其添加到您的 CSS 样式的末尾。

.announcement-bar{
  position: absolute !important;
  height: 25px;
  width: 100%;
  font-size: small;
}
.announcement-bar__message{
 padding:0 !important;
  
}