Question

我想制作一个巨型菜单。当您将鼠标悬停在每个正方形上时，我要在下面显示容器。

一切正常，但是容器没有放置在正确的位置。

我尝试更改.rayons-content，并将位置放置在absolute中。但是当绝对时，容器从右向左移动。

页面加载时

当我开始在页面上滚动时

.rayons-content {
  width: 1240px;
  top: 290px;
  height: 500px;
  z-index: 99999 !important;
  background-color: white;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  -ms-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  -o-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  text-align: left;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

<div class="menu-rayon FondOrange">
  <ul class="liste-rayon">

    <li class="menu_item open-menu" data-key="rayons-1" style="padding:0px 15px 0px 15px; white-space:nowrap;">
      <div class="menu-case">
        <a href="Produits.asp?Theme=Fournitures_de_bureau" class="F_Cabin Majuscule" title="Services Généraux">Services<br>Généraux</a>
      </div>
      <div id="rayons-1" class="rayons-content" style="display: none;">
        <div>
          <div class="columns container-rayon">
            <div class="column is-four-fifths">
              <div class="columns sub-menu">

                <div class="column">
                  <h3><a href="Produits.asp?Theme=Fournitures_de_bureau" title="Achat Centrale - Secrétariat et Administratif" class="sub-menu-link"><span class="F_Cabin categorie_titre">Bureaux - Administratif</span></a></h3>
                  <ul class="sub-cat">

                    <li><a href="Produits.asp?Theme=Assurance_RC_et_Vehicules" title="Assurance RC Pro"><span class="F_Cabin">Assurance RC et Véhicules</span></a></li>

                  </ul>
                </div>

                <div class="column">
                  <h3><a href="Texte.asp?Theme=Informatique___Telecoms" title="Impressions" class="sub-menu-link"><span class="F_Cabin categorie_titre">Informatique - Telecoms</span></a></h3>
                  <ul class="sub-cat">

                    <li><a href="Produits.asp?Theme=Copieurs_multifonctions_A4_A3" title="Achat Centrale - Copieurs multifonctions A4-A3"><span class="F_Cabin">Copieurs multifonctions A4-A3</span></a></li>

                  </ul>
                </div>

                <div class="column">
                  <h3><a href="Texte.asp?Theme=Vehicules_Hors_funeraire" title="Divers" class="sub-menu-link"><span class="F_Cabin categorie_titre">Véhicules Hors funéraire</span></a></h3>
                  <ul class="sub-cat">

                    <li><a href="Produits.asp?Theme=Carte_essence___Telepeage" title="Carte essence - Télépéage"><span class="F_Cabin">Carte essence - Télépéage</span></a></li>

                  </ul>
                </div>

              </div>
            </div>
            <div class="column banners">
              <img src="https://via.placeholder.com/200x450">
            </div>
          </div>
        </div>
      </div>
    </li>

    <li data-key="rayons-100" style="width:80%;"></li>
  </ul>
</div>

[编辑]

我稍微改变了CSS。我在position: absolute上添加了.rayons-content。

当我将鼠标悬停在元素上时，菜单位置不会保持相同位置。

例如第一个链接，菜单靠近左侧，而我希望它位于页面中央：

如果我将鼠标悬停在第四个链接上，则菜单会移动，但是它仍然不在合适的位置。

Answer 1

使用position:absolute使您处在正确的轨道上。固定位置将始终冻结您所描述的元素。为此根本无法工作。从固定位置更改为绝对位置时，left:50%的{{1}}属性的含义会有所不同，因此，您还需要调整该属性。

在固定定位中，.rayons-content的值表示其左边缘将沿视口左边缘的正方向（向右）位于视口宽度的50％处，而无论滚动位置。

在绝对定位中，这意味着元素的左边缘将从元素的左边缘的左边缘定位为定位父元素的元素宽度的50％。

要将此元素放置在所需的位置，您可能还需要摆弄left:50%的父级及其其他祖先（position的{{1}}属性， .rayons-content，menu-rayon）

哪个包含元素是绝对定位元素所依赖的定位父元素-它是最接近的祖先元素，其liste-rayn属性具有不固定（非默认）值。如果您想将某个元素设置为定位容器（尚未定位），请对该元素应用menu_item open-menu。当您希望将祖先作为定位容器而忽略时-迫使绝对定位的元素在层次结构中进一步查找以找到其定位父级时-您需要对其应用position。

为什么导航栏的内容不保留在同一位置？

1 个答案: