如何用CSS使Blogger桌面端Header取消固定随页面滚动

• 需求：让网站桌面端Header随页面滚动移动（移动端表现正常，无需修改）
• 现状：桌面端Header始终固定，尝试设置position: relative无效
• 环境：Blogger动态视图主题（自定义难度较高）

#header .header-drawer.sticky,
#header .header-drawer {
  top: 134px;
}

#header .header-bar {
  height: 165px;
}

#header:hover .header-drawer,
#header .header-drawer.open,
.header-ssyby,
body.viewitem-open #header .header-drawer {
  top: 165px;
}

#header-container {
  height: 205px;
}

.viewitem-panel .viewitem-inner {
  top: 100px;
  padding-bottom: 120px !important;
  height: auto !important;
}

#header-container #header.header .header-bar span.title {
  background: url(http://2.bp.blogspot.com/-oOCWrvF6YMI/TpswCGyxlGI/AAAAAAAAD2A/yFmym6cDyS0/s380/mastercopy.png) no-repeat center;
  margin-left: auto !important;
  margin-right: auto !important;
  height: 165px;
}

.header-bar #search {
  display: none !important;
}

#header.header .title a h1,
#header.header .title h3 {
  display: none;
}

.attribution {
  display: none !important;
}

#gadget-dock {
  display: none !important;
}

#header .header-drawer.sticky {
  margin-top: 0px !important;
  top: 165px !important;
  -moz-transition: top 0.0s linear 0.0s !important;
  -webkit-transition: top 0.0s linear 0.0s !important;
  -ms-transition: top 0.0s linear 0.0s !important;
  -o-transition: top 0.0s linear 0.0s !important;
}

Blogger动态视图主题的Header固定通常由内联样式或主题JS控制，直接修改单个元素的position容易被覆盖。添加以下CSS代码，仅针对桌面端重置固定定位：

/* 针对桌面端设备（可根据需求调整断点） */
@media screen and (min-width: 768px) {
  /* 重置Header容器和Header的定位属性 */
  #header-container,
  #header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
  }

  /* 移除sticky类的固定定位 */
  #header .header-drawer.sticky {
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
  }

  /* 让Header容器高度自适应，避免固定高度导致布局问题 */
  #header-container {
    height: auto !important;
  }
}

关键说明 #

1. 用@media媒体查询限制代码仅在桌面端生效，不影响移动端现有正常表现
2. 通过!important强制覆盖主题的高优先级内联样式
3. 重置position为relative并清除定位偏移值，让Header回归文档流随页面滚动
4. 调整容器高度为auto，避免固定高度引发的布局错位

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