下拉菜单-Z索引堆叠问题

Question

My team and I are having trouble stacking a Dropdown component on our page. 我和我的团队在将页面上的Dropdown组件堆叠在一起时遇到了麻烦。 Essentially, we want the Dropdown to slide down underneath the top-nav when the button is clicked, but as it slides down, it should be positioned above everything else: the sub-nav and the content below. 本质上，当单击按钮时，我们希望下拉菜单在顶部导航下方向下滑动，但是当它向下滑动时，它应位于其他所有内容之上：子导航和其下方的内容。

Currently, the Dropdown is positioned as absolute and the animation is performed with a transform: translateY() . 当前，Dropdown被定位为绝对位置，并且动画通过以下transform: translateY()执行transform: translateY() 。 We've tried positioning the elements outside of it as relative (the outer <ul> , <nav> , and <div id="top-nav"> elements that are bolded) with a higher z-index to ensure the dropdown stays below it, but so far it hasn't worked. 我们尝试将其外部的元素定位为相对的（以粗体显示的外部<ul> ， <nav>和<div id="top-nav">元素），以确保z索引较高低于它，但到目前为止它没有用。

We're also not able to modify any of the CSS or structure of the div#content below, but we do have flexibility as to where we can place the Dropdown structurally in the #header. 我们也无法修改下面的任何CSS或div＃content的结构，但是我们确实可以灵活地将Dropdown结构化地放置在#header中。

EDIT: Tried my best to recreate the scenario with JSFiddle here: https://jsfiddle.net/4zaas4sq/ 编辑：尽我最大的努力在这里用JSFiddle重新创建场景： https ://jsfiddle.net/4zaas4sq/

Here's roughly what our markdown looks like: 我们的减价大致如下：

<body>
  <div id="header">
    <div>
      **<div id="top-nav">**
        <div>
          **<nav>**
            <ul></ul>
            **<ul>**
              <li>
                <DROPDOWN>
                  <button onClick={toggleDropdown}>Log In</button>
                  <div className={(this.state.show && 'show})>
                    <ul></ul>
                  </div>
                  ...
                </DROPDOWN>
              </li>
              <li></li>
            </ul>
          </nav>
        </div>
      </div>
      <div id="sub-nav">
        ...
      </div>
    </div>
  </div>
  <div id="content">

  </div>
</body>

Here's a wireframe depicting the final state of the dropdown. 这是一个线框，描述了下拉菜单的最终状态。

最终下拉状态的线框

Any help or suggestions would be appreciated! 任何帮助或建议，将不胜感激！

Answer 1

I used max-height property.I didn't change a lot of things in your code.In JS code you will see main changes.Let me know if this solution is what you want.Thanks :) 我使用了max-height属性。我没有在代码中进行很多更改。在JS代码中，您将看到主要更改。让我知道此解决方案是否是您想要的。谢谢:)

In html code add class="hideItem" in the divider with id="dropdown" like this: 在html代码中，在分隔符中添加id =“ dropdown”的class =“ hideItem”，如下所示：

<div id="dropdown" class="hideItem">

JS code JS代码

$(document).ready(function() {
$('#dropdown-button').click(function() {
    if( $("#dropdown").hasClass( 'hideItem' )){
        $( "#dropdown" ).css( 'max-height' , '100%' );
      $("#dropdown").removeClass( 'hideItem' );
      $("#dropdown").addClass( 'showItem' );
    }else{
        $( "#dropdown" ).css( 'max-height' , '0' );
      $("#dropdown").addClass( 'hideItem' );
      $("#dropdown").removeClass( 'showItem' );
    }
});
});

css code CSS代码

html, body {
 height: 100%;
}

#top-nav {
  background-color: mediumpurple;
  width: 100%;
 }

.nav {
   display: flex;
   justify-content: space-between;
 }

 .inner-left-nav {
   list-style: none;
   display: flex;
 }

 .inner-left-nav li {
    padding: 5px;
    border: 1px solid black;
  }
  .inner-right-nav {
      display: flex;
      list-style: none;
      margin: 0;
  }

  .inner-right-nav li {
     align-items: center;
     padding: 0 5px;
  }

   .dropdown-container {
      display: flex;
      align-items: center;
      height: 100%;
    }

    #dropdown {
       position: absolute;
       top: 70px;
       right: 100px;
       max-height: 0;
       overflow-y: hidden;
       transition: max-height 1s ease-in-out;
       background-color: mediumseagreen;
    }

   #dropdown.show {
     visibility: visible;
     transform: translateY(0%);
     transition: visibility 0s, transform 0.3s;
    }

    #dropdown-button {
      border: 1px solid black;
      background: transparent;
      padding: 0 20px;
      cursor: pointer;
    }

   .dropdown-list {
      padding: 0;
      list-style: none;
   }
   #sub-nav {
      display: flex;
      justify-content: space-between;
      background-color: grey;
   }

   #content {
      background-color: azure;
      width: 100%;
      height: 100%;
   }

下拉菜单-Z索引堆叠问题

问题描述

1 个解决方案

解决方案1
0 2017-10-18 21:38:44

下拉菜单-Z索引堆叠问题

问题描述

1 个解决方案

解决方案1 0 2017-10-18 21:38:44

解决方案1
0 2017-10-18 21:38:44