Question

我的 Shopfiy 商店的导航栏下拉菜单隐藏在页面内容后面；在浏览器中检查后，我可以看到受影响的元素是 .site-nav__dropdown 并尝试将位置从绝对位置更改为 position: relative 并为其赋予更高的 z-index 值，但没有成功。

如何让下拉菜单出现在页面内容的顶部？任何帮助将不胜感激，谢谢。


    /*=============== Critical CSS ===================*/
    .main-content {
      opacity: 1; 
      z-index: 50;}

    .main-content .shopify-section {
      display: inherit; }

    .critical-hidden {
      display: inherit; }

    /*================ #Basic Styles ================*/
    .page-width {
      *zoom: 1;
      max-width: 1200px;
      margin: 0 auto; }
      .page-width::after {
        content: '';
        display: table;
        clear: both; }

    .main-content {
      display: block;
      padding-top: 35px; }
      @media only screen and (min-width: 750px) {
        .main-content {
          padding-top: 55px; } }

    .section-header {
      margin-bottom: 35px; 
      z-index: 9999 !important}
      @media only screen and (min-width: 750px) {
        .section-header {
          margin-bottom: 55px; } }

    /*================ #Site Nav and Dropdowns ================*/
    .site-nav--centered {
      padding-bottom: 22px; 
      z-index: 1000;
    }

    /*================ Site Nav Links ================*/
    .site-nav__link.site-nav--active-dropdown {
      border: 1px solid var(--color-border);
      border-bottom: 1px solid transparent;
    }

    .site-nav__link:focus .site-nav__label, .site-nav__link:not([disabled]):hover .site-nav__label {
      border-bottom-color: var(--color-text); }

    @media only screen and (max-width: 989px) {
      .site-nav__link--button {
        font-size: calc(var(--font-size-base) * 1px); } }

    .site-nav__link--button:focus, .site-nav__link--button:hover {
      color: var(--color-text-focus); }

    /*================ Dropdowns ================*/
    .site-nav--has-dropdown {
      position: relative;
    }

    .site-nav--has-centered-dropdown {
      position: static; }

    .site-nav__dropdown {
      display: none;
      padding: 11px 30px 11px 0;
      margin: 0;
      text-align: left;
      border: 1px solid var(--color-border);
      background: var(--color-bg);
      left: -1px;
      top: 41px; }
      .site-nav__dropdown .site-nav__link {
        padding: 4px 15px 5px; }
      .site-nav--active-dropdown .site-nav__dropdown {
        display: block; }
      .site-nav__dropdown li {
        display: block;
      position: absolute;
      z-index: 100;
      }

    .site-nav__dropdown--right:not(.site-nav__dropdown--centered) {
      right: 0;
      left: unset; }

    .site-nav__dropdown--left:not(.site-nav__dropdown--centered) {
      left: 0; }

    .site-nav__dropdown--centered {
      width: 100%;
      padding: 0;
      text-align: center; }

    <body class="template-index">

      <a class="in-page-link visually-hidden skip-link" href="#MainContent">Skip to content</a><style data-shopify>

      .cart-popup {
        box-shadow: 1px 1px 10px 2px rgba(235, 235, 235, 0.5);
      }</style><div class="cart-popup-wrapper cart-popup-wrapper--hidden critical-hidden" role="dialog" aria-modal="true" aria-labelledby="CartPopupHeading" data-cart-popup-wrapper>
      <div class="cart-popup" data-cart-popup tabindex="-1">
        <div class="cart-popup__header">
          <h2 id="CartPopupHeading" class="cart-popup__heading">Just added to your cart</h2>
          <button class="cart-popup__close" aria-label="Close" data-cart-popup-close><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 40 40"><path d="M23.868 20.015L39.117 4.78c1.11-1.108 1.11-2.77 0-3.877-1.109-1.108-2.773-1.108-3.882 0L19.986 16.137 4.737.904C3.628-.204 1.965-.204.856.904c-1.11 1.108-1.11 2.77 0 3.877l15.249 15.234L.855 35.248c-1.108 1.108-1.108 2.77 0 3.877.555.554 1.248.831 1.942.831s1.386-.277 1.94-.83l15.25-15.234 15.248 15.233c.555.554 1.248.831 1.941.831s1.387-.277 1.941-.83c1.11-1.109 1.11-2.77 0-3.878L23.868 20.015z" class="layer"/></svg></button>
        </div>
        <div class="cart-popup-item">
          <div class="cart-popup-item__image-wrapper hide" data-cart-popup-image-wrapper data-image-loading-animation></div>
          <div class="cart-popup-item__description">
            <div>
              <h3 class="cart-popup-item__title" data-cart-popup-title></h3>
              <ul class="product-details" aria-label="Product details" data-cart-popup-product-details></ul>
            </div>
            <div class="cart-popup-item__quantity">
              <span class="visually-hidden" data-cart-popup-quantity-label></span>
              <span aria-hidden="true">Qty:</span>
              <span aria-hidden="true" data-cart-popup-quantity></span>
            </div>
          </div>
        </div>

        <a href="/cart" class="cart-popup__cta-link btn btn--secondary-accent">
          View cart (<span data-cart-popup-cart-quantity></span>)
        </a>

        <div class="cart-popup__dismiss">
          <button class="cart-popup__dismiss-button text-link text-link--accent" data-cart-popup-dismiss>
            Continue shopping
          </button>
        </div>
      </div>
    </div>

    <div id="shopify-section-header" class="shopify-section">

    <div id="SearchDrawer" class="search-bar drawer drawer--top critical-hidden" role="dialog" aria-modal="true" aria-label="Search" data-predictive-search-drawer>
      <div class="search-bar__interior">
        <div class="search-form__container" data-search-form-container>
          <form class="search-form search-bar__form" action="/search" method="get" role="search">
            <div class="search-form__input-wrapper">
              <input
                type="text"
                name="q"
                placeholder="Search"
                role="combobox"
                aria-autocomplete="list"
                aria-owns="predictive-search-results"
                aria-expanded="false"
                aria-label="Search"
                aria-haspopup="listbox"
                class="search-form__input search-bar__input"
                data-predictive-search-drawer-input
              />
              <input type="hidden" name="options[prefix]" value="last" aria-hidden="true" />
              <div class="predictive-search-wrapper predictive-search-wrapper--drawer" data-predictive-search-mount="drawer"></div>
            </div>

            <button class="search-bar__submit search-form__submit"
              type="submit"
              data-search-form-submit>
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 37 40"><path d="M35.6 36l-9.8-9.8c4.1-5.4 3.6-13.2-1.3-18.1-5.4-5.4-14.2-5.4-19.7 0-5.4 5.4-5.4 14.2 0 19.7 2.6 2.6 6.1 4.1 9.8 4.1 3 0 5.9-1 8.3-2.8l9.8 9.8c.4.4.9.6 1.4.6s1-.2 1.4-.6c.9-.9.9-2.1.1-2.9zm-20.9-8.2c-2.6 0-5.1-1-7-2.9-3.9-3.9-3.9-10.1 0-14C9.6 9 12.2 8 14.7 8s5.1 1 7 2.9c3.9 3.9 3.9 10.1 0 14-1.9 1.9-4.4 2.9-7 2.9z"/></svg>
              <span class="icon__fallback-text">Submit</span>
            </button>
          </form>

          <div class="search-bar__actions">
            <button type="button" class="btn--link search-bar__close js-drawer-close">
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 40 40"><path d="M23.868 20.015L39.117 4.78c1.11-1.108 1.11-2.77 0-3.877-1.109-1.108-2.773-1.108-3.882 0L19.986 16.137 4.737.904C3.628-.204 1.965-.204.856.904c-1.11 1.108-1.11 2.77 0 3.877l15.249 15.234L.855 35.248c-1.108 1.108-1.108 2.77 0 3.877.555.554 1.248.831 1.942.831s1.386-.277 1.94-.83l15.25-15.234 15.248 15.233c.555.554 1.248.831 1.941.831s1.387-.277 1.941-.83c1.11-1.109 1.11-2.77 0-3.878L23.868 20.015z" class="layer"/></svg>
              <span class="icon__fallback-text">Close search</span>
            </button>
          </div>
        </div>
      </div>
    </div>


    <div class="animatedParent animateOnce">
    <div class="nav animated fadeIn">

    <div data-section-id="header" data-section-type="header-section" data-header-section style="margin-bottom: 1.6rem">
      

      <header class="site-header border-bottom logo--left" role="banner">
        <div class="grid grid--no-gutters grid--table site-header__mobile-nav">
          

          <div class="grid__item medium-up--one-quarter-nav logo-align--left">
            
            
              <h1 class="h2 site-header__logo">
            
              
    <a href="/" class="site-header__logo-image" data-image-loading-animation>
                  
                  <img class="lazyload js"
                       src="//cdn.shopify.com/s/files/1/0514/3560/2081/files/Tom_logo_final_300x300.png?v=1606487810"
                       data-src="//cdn.shopify.com/s/files/1/0514/3560/2081/files/Tom_logo_final_{width}x.png?v=1606487810"
                       data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                       data-aspectratio="3.214939024390244"
                       data-sizes="auto"
                       alt="Tom"
                       style="max-width: 120px">
                  <noscript>
                    
                    <img src="//cdn.shopify.com/s/files/1/0514/3560/2081/files/Tom_logo_final_120x.png?v=1606487810"
                         srcset="//cdn.shopify.com/s/files/1/0514/3560/2081/files/Tom_logo_final_120x.png?v=1606487810 1x, //cdn.shopify.com/s/files/1/0514/3560/2081/files/Tom_logo_final_120x@2x.png?v=1606487810 2x"
                         alt="Tom"
                         style="max-width: 120px;">
                  </noscript>
                </a>
              </h1>
          </div>
            <nav class="grid__item medium-up--one-half-nav small--hide" id="AccessibleNav" role="navigation">
              
    <ul class="site-nav list--inline" id="SiteNav">
          <li>
            <a href="/collections/shoes"
              class="site-nav__link site-nav__link--main"
              
            >
              <span class="site-nav__label">shoes</span>
            </a>
          </li>
          <li>
            <a href="/collections/sandals"
              class="site-nav__link site-nav__link--main"
              
            >
              <span class="site-nav__label">sandals</span>
            </a>
          </li>
          <li class="site-nav--has-dropdown" data-has-dropdowns>
            <button class="site-nav__link site-nav__link--main site-nav__link--button" type="button" aria-expanded="false" aria-controls="SiteNavLabel-distance">
              <span class="site-nav__label">Distance</span><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-down" viewBox="0 0 9 9"><path d="M8.542 2.558a.625.625 0 0 1 0 .884l-3.6 3.6a.626.626 0 0 1-.884 0l-3.6-3.6a.625.625 0 1 1 .884-.884L4.5 5.716l3.158-3.158a.625.625 0 0 1 .884 0z" fill="#fff"/></svg>
            </button>

            <div class="site-nav__dropdown critical-hidden" id="SiteNavLabel-distance">
                <ul>
                    <li>
                      <a href="/collections/all-lightweight-shoes"
                      class="site-nav__link site-nav__child-link"
                      
                    >
                        <span class="site-nav__label">All Lightweight Shoes</span>
                      </a>
                    </li>
                    <li>
                      <a href="/collections/running"
                      class="site-nav__link site-nav__child-link"
                      
                    >
                        <span class="site-nav__label">Running</span>
                      </a>
                    </li>
                    <li>
                      <a href="/collections/Sport"
                      class="site-nav__link site-nav__child-link site-nav__link--last"
                      
                    >
                        <span class="site-nav__label">Running</span>
                      </a>
                    </li>
                </ul>
            </div>
          </li>
          <li>
            <a href="/collections/formal"
              class="site-nav__link site-nav__link--main"
              
            >
              <span class="site-nav__label">Formal</span>
            </a>
          </li>
          <li class="site-nav--has-dropdown" data-has-dropdowns>
            <button class="site-nav__link site-nav__link--main site-nav__link--button" type="button" aria-expanded="false" aria-controls="SiteNavLabel-value-packs">
              <span class="site-nav__label">Value Packs</span><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-down" viewBox="0 0 9 9"><path d="M8.542 2.558a.625.625 0 0 1 0 .884l-3.6 3.6a.626.626 0 0 1-.884 0l-3.6-3.6a.625.625 0 1 1 .884-.884L4.5 5.716l3.158-3.158a.625.625 0 0 1 .884 0z" fill="#fff"/></svg>
            </button>
            <div class="site-nav__dropdown critical-hidden" id="SiteNavLabel-value-packs">
                <ul>
                    <li>
                      <a href="/collections/casual-wear"
                      class="site-nav__link site-nav__child-link"
                      
                    >
                        <span class="site-nav__label">Casual Wear</span>
                      </a>
                    </li>
                    <li>
                      <a href="/collections/slip-ons"
                      class="site-nav__link site-nav__child-link"
                      
                    >
                        <span class="site-nav__label">Slips Ons</span>
                      </a>
                    </li>
                    <li>
                      <a href="/collections/sandals"
                      class="site-nav__link site-nav__child-link"
                      
                    >
                        <span class="site-nav__label">Sandlas</span>
                      </a>
                    </li>
                    <li>
                      <a href="/collections/Boots"
                      class="site-nav__link site-nav__child-link"
                      
                    >
                        <span class="site-nav__label">Boots</span>
                      </a>
                    </li>
                    <li>
                      <a href="/collections/Recycled"
                      class="site-nav__link site-nav__child-link site-nav__link--last"
                      
                    >
                        <span class="site-nav__label">Recycled</span>
                      </a>
                    </li>
                </ul>
            </div>
          </li>
          <li>
            <a href="/collections/kids"
              class="site-nav__link site-nav__link--main"
              
            >
              <span class="site-nav__label">Kids</span>
            </a>
          </li>
          <li class="site-nav--has-dropdown" data-has-dropdowns>
            <button class="site-nav__link site-nav__link--main site-nav__link--button" type="button" aria-expanded="false" aria-controls="SiteNavLabel-featured">
              <span class="site-nav__label">Featured</span><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-down" viewBox="0 0 9 9"><path d="M8.542 2.558a.625.625 0 0 1 0 .884l-3.6 3.6a.626.626 0 0 1-.884 0l-3.6-3.6a.625.625 0 1 1 .884-.884L4.5 5.716l3.158-3.158a.625.625 0 0 1 .884 0z" fill="#fff"/></svg>
            </button>
            <div class="site-nav__dropdown critical-hidden" id="SiteNavLabel-featured">
                <ul>
                    <li>
                      <a href="/collections/lightweight"
                      class="site-nav__link site-nav__child-link"
                      
                    >
                        <span class="site-nav__label">Lightweight</span>
                      </a>
                    </li>
                    <li>
                      <a href="/collections/flip-flops"
                      class="site-nav__link site-nav__child-link"
                      
                    >
                        <span class="site-nav__label">Flip Flops</span>
                      </a>
                    </li>
                    <li>
                      <a href="/collections/socks"
                      class="site-nav__link site-nav__child-link"
                      
                    >
                        <span class="site-nav__label">Socks</span>
                      </a>
                    </li>
                    <li>
                      <a href="/collections/trainers"
                      class="site-nav__link site-nav__child-link site-nav__link--last"
                    >
                        <span class="site-nav__label">Trainers</span>
                      </a>
                    </li>
                </ul>
            </div>
          </li>
          <li>
            <a href="/collections/recycled"
              class="site-nav__link site-nav__link--main"
              
            >
              <span class="site-nav__label">Recycled</span>
            </a>
          </li>
          <li>
            <a href="/collections/sale"
              class="site-nav__link site-nav__link--main"
              
            >
              <span class="site-nav__label">Sale</span>
            </a>
          </li> 
    </ul>
    </nav>
          
          <div class="grid__item medium-up--one-quarter-nav text-right site-header__icons site-header__icons--plus">
            <div class="site-header__icons-wrapper">

              <button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top" data-predictive-search-open-drawer>
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 37 40"><path d="M35.6 36l-9.8-9.8c4.1-5.4 3.6-13.2-1.3-18.1-5.4-5.4-14.2-5.4-19.7 0-5.4 5.4-5.4 14.2 0 19.7 2.6 2.6 6.1 4.1 9.8 4.1 3 0 5.9-1 8.3-2.8l9.8 9.8c.4.4.9.6 1.4.6s1-.2 1.4-.6c.9-.9.9-2.1.1-2.9zm-20.9-8.2c-2.6 0-5.1-1-7-2.9-3.9-3.9-3.9-10.1 0-14C9.6 9 12.2 8 14.7 8s5.1 1 7 2.9c3.9 3.9 3.9 10.1 0 14-1.9 1.9-4.4 2.9-7 2.9z"/></svg>
                <span class="icon__fallback-text">Search</span>
              </button>
                  <a href="/account/login" class="site-header__icon site-header__account">
                    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-login" viewBox="0 0 28.33 37.68"><path d="M14.17 14.9a7.45 7.45 0 1 0-7.5-7.45 7.46 7.46 0 0 0 7.5 7.45zm0-10.91a3.45 3.45 0 1 1-3.5 3.46A3.46 3.46 0 0 1 14.17 4zM14.17 16.47A14.18 14.18 0 0 0 0 30.68c0 1.41.66 4 5.11 5.66a27.17 27.17 0 0 0 9.06 1.34c6.54 0 14.17-1.84 14.17-7a14.18 14.18 0 0 0-14.17-14.21zm0 17.21c-6.3 0-10.17-1.77-10.17-3a10.17 10.17 0 1 1 20.33 0c.01 1.23-3.86 3-10.16 3z"/></svg>
                    <span class="icon__fallback-text">Log in</span>
                  </a>
              <a href="/cart" class="site-header__icon site-header__cart">
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-cart" viewBox="0 0 37 40"><path d="M36.5 34.8L33.3 8h-5.9C26.7 3.9 23 .8 18.5.8S10.3 3.9 9.6 8H3.7L.5 34.8c-.2 1.5.4 2.4.9 3 .5.5 1.4 1.2 3.1 1.2h28c1.3 0 2.4-.4 3.1-1.3.7-.7 1-1.8.9-2.9zm-18-30c2.2 0 4.1 1.4 4.7 3.2h-9.5c.7-1.9 2.6-3.2 4.8-3.2zM4.5 35l2.8-23h2.2v3c0 1.1.9 2 2 2s2-.9 2-2v-3h10v3c0 1.1.9 2 2 2s2-.9 2-2v-3h2.2l2.8 23h-28z"/></svg>
                <span class="icon__fallback-text">Cart</span>
                <div id="CartCount" class="site-header__cart-count critical-hidden" data-cart-count-bubble>
                  <span data-cart-count>5</span>
                  <span class="icon__fallback-text medium-up--hide">items</span>
                </div>
              </a>
            </div>
          </div>
        </div>
      </header>

绝对

亲属

隐藏在页面内容后面的导航栏下拉菜单

0 个答案: