页眉/节粘贴到页面顶部

Question

无论我怎么尝试，我都不能让我的页眉部分粘在页面的顶部！

​

.cluster-padding-large {
  padding: 30px 1.28%;
}

.flex-row {
  display: flex !important;
  /* box-sizing: border-box; */
  /* display: flex; */
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

<section class="zpa-container zp ba-25443645">
  <div class="js-cluster zpa-cluster-padding-none cluster-padding-large zp cac-25443645">
    <div class="flex-row middle-sm zpa-mobile-navigation-wrapper">
      <div class="xs-12 sm-2 zpa-navbar-order">
        <div class="zpa-voffset--xs zpa-mobile-align--center zpa-align--center zpa-image-max-width--xlarge zp ba-25443642" data-id="25443642">
          <a class="zpa-disabled-when-link-empty" href="https://123.com" target="_self" data-type="custom_dest"> <img style="max-height: 45px;" src="{{ 'bae_babeLogo.png' | asset_url }}" alt="Logo" </a></div>
      </div>
      <div class="xs-12 sm-7 zpa-mobile-row-offset-none zpa-text-center">
        <div class="zpa-navigation-main-box"><label class="zpa-navbar-label zp lat-25443643" for="nav_5722335"> <svg class="zpa-icon-currentcolor zpa-navgation-icon" width="24px" height="24px"> <use xlink:href="#navbar-icon"></use> </svg> <span class="zpa-navbar-menu-title zpa-tablet-offset-left-xs">MENU</span> </label></div>
        <input type="checkbox" name="navigation button" id="nav_5722335" class="zpa-navigation-toggle hidden">
        <div class="zpa-navigation-list__wrap zpa-navigation-list-wrap-btn zpa-mobile-offset-right-xs">
          <ul class="zpa-list-unstyled zpa-navigation-list zp ba-25443643" data-id="25443643">
            <li class="zpa-navigation-list-item"><a class="zpa-navigation-list-link zp lat-25443643" href="#5722351" target="_self" title="Reviews"> Reviews </a></li>
            <li class="zpa-navigation-list-item"><a class="zpa-navigation-list-link zp lat-25443643" href="#5722358" target="_self" title="FAQ"> FAQ </a></li>
            <li class="zpa-navigation-list-item"><a class="zpa-navigation-list-link zp lat-25443643" href="#5722356" target="_self" title="Portable Mini Air Conditioner MAX™"> 123™ </a></li>
          </ul>
        </div>
      </div>
      <div class="xs-12 sm-3 zpa-mobile-absolute-position zpa-mobile-wrap-btn-cart center-xs">
        <div class="flex-grow-1 zpa-mobile-btn-center zpa-text-center-sm zpa-button-alignment-center"><a class="zpa-btn-custom zpa-mobile-btn-size zpa-button-padding-medium zp ba-25443644" data-id="25443644" href="#5722356" data-type="cluster_dest" target="_self" role="button"> ADD TO CART </a></div>
      </div>
    </div>
  </div>
</section>

​

标签选项的列表在这个部分和'flex-row‘包含css来对齐元素，问题是，无论我怎么尝试，无论是position: sticky，on the section with inline styling或任何东西，还是'top；0’都不起作用。我是不是漏掉了什么明显的东西？

Answer 1

在css中使用position: fixed使某些内容停留在页面上