使用重叠下拉列表修复z-index

时间：2018-04-12 14:29:02

标签： css z-index

我在使用z-index的项目中遇到问题。

我有几个组件都有下拉列表。我遇到的问题是第一个组件的下拉列表位于第二个组件的下拉按钮下，这使得内容部分隐藏。

我基本上需要第一个下拉列表才能拥有最高的z-index。但是，由于我将它们设置为相同的样式，它们都具有相同的z-index。

我想在没有JavaScript的情况下解决此问题，我必须动态更改z-index或附加到代码段的flexbox的解决方案。

＆＃13;
＆＃13; 
const dropdowns = document.querySelectorAll('.app-item-dropdown');

dropdowns.forEach((item) => {
  item.querySelector('button').addEventListener('click', function() {
    this.nextElementSibling.parentNode.classList.toggle('expanded')
  })
})
＆＃13; 
:root {
  --z1: 1;
  --z2: 2;
  --z3: 3;
  --z4: 4;
  --z5: 5;
}

html {
  box-sizing: border-box; 
}
*, *:after, *:before {
  box-sizing: inherit;
}

body {
  background: lightgrey;
  text-align: center;
}

ul {
  margin: 0; padding: 0; list-style: none;
}

.container {
  max-width: 960px; margin: 0 auto; border: 1px solid red;
  padding: 24px;
}

.solution {
  display: flex;
  flex-direction: column-reverse;
}

.app-item {
  border: 1px solid yellow;
  min-height: 150px;
  background: grey;
  position: relative;
  margin: 24px;
}

.app-item-dropdown {
  
  position: absolute;
  width: 272px;
  top: 16px;
  right: 16px;
  background: white;
  z-index: var(--z2);
}

.app-item-dropdown ul {
  display: none;
  position:relative;
  z-index: var(--z4);
}

.app-item-dropdown ul li {
  padding: 4px 8px;
}

.app-item-dropdown.expanded ul{
  display: block;
}

.lightblue {
  background: lightblue;
}

.lightsalmon {
  background: lightsalmon; 
}
＆＃13; 
<div id="wrapper" class="container problem">
  <div class="app-item">
    <h2>1</h2>
    <div class="app-item-dropdown">
      <button>click</button>
      <div class="box">
        <ul>
          <li>hello</li>
          <li>hello</li>
          <li>hellohello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hehellohellollo</li>
          <li>hello</li>
          <li>helhellolo</li>
          <li>hello</li>
        </ul>
      </div>
    </div>
  </div>
  
  <div class="app-item">
    <h2>2</h2>
    <div class="app-item-dropdown lightblue">
      <button>click</button>
      <div class="box">
        <ul>
          <li>hello</li>
          <li>hello</li>
          <li>hellohello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hehellohellollo</li>
          <li>hello</li>
          <li>helhellolo</li>
          <li>hello</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="app-item">
    <h2>3</h2>
    <div class="app-item-dropdown lightsalmon">
      <button>click</button>
      <div class="box">
        <ul>
          <li>hello</li>
          <li>hello</li>
          <li>hellohello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hehellohellollo</li>
          <li>hello</li>
          <li>helhellolo</li>
          <li>hello</li>
        </ul>
      </div>
    </div>
  </div>
</div>


<hr>
<h1>Solution</h1>
<h2>With <code>flex-direction: column-reverse</code> </h2>


<div id="wrapper2" class="container solution">
  <div class="app-item">
    <h2>1</h2>
    <div class="app-item-dropdown">
      <button>click</button>
      <div class="box">
        <ul>
          <li>hello</li>
          <li>hello</li>
          <li>hellohello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hehellohellollo</li>
          <li>hello</li>
          <li>helhellolo</li>
          <li>hello</li>
        </ul>
      </div>
    </div>
  </div>
  
  <div class="app-item">
    <h2>2</h2>
    <div class="app-item-dropdown lightblue">
      <button>click</button>
      <div class="box">
        <ul>
          <li>hello</li>
          <li>hello</li>
          <li>hellohello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hehellohellollo</li>
          <li>hello</li>
          <li>helhellolo</li>
          <li>hello</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="app-item">
    <h2>3</h2>
    <div class="app-item-dropdown lightsalmon">
      <button>click</button>
      <div class="box">
        <ul>
          <li>hello</li>
          <li>hello</li>
          <li>hellohello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hehellohellollo</li>
          <li>hello</li>
          <li>helhellolo</li>
          <li>hello</li>
        </ul>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

设置您添加的类的z-index，点击高于现有元素的z-index。

＆＃13;
＆＃13; 
const dropdowns = document.querySelectorAll('.app-item-dropdown');

dropdowns.forEach((item) => {
  item.querySelector('button').addEventListener('click', function() {
    this.nextElementSibling.parentNode.classList.toggle('expanded')
  })
})
＆＃13; 
:root {
  --z1: 1;
  --z2: 2;
  --z3: 3;
  --z4: 4;
  --z5: 5;
}

html {
  box-sizing: border-box; 
}
*, *:after, *:before {
  box-sizing: inherit;
}

body {
  background: lightgrey;
  text-align: center;
}

ul {
  margin: 0; padding: 0; list-style: none;
}

.container {
  max-width: 960px; margin: 0 auto; border: 1px solid red;
  padding: 24px;
}

.solution {
  display: flex;
  flex-direction: column-reverse;
}

.app-item {
  border: 1px solid yellow;
  min-height: 150px;
  background: grey;
  position: relative;
  margin: 24px;
}

.app-item-dropdown {
  
  position: absolute;
  width: 272px;
  top: 16px;
  right: 16px;
  background: white;
  z-index: var(--z2);
}

.app-item-dropdown ul {
  display: none;
  position:relative;
  z-index: var(--z4);
}

.app-item-dropdown ul li {
  padding: 4px 8px;
}

.app-item-dropdown.expanded ul{
  display: block;
}

.lightblue {
  background: lightblue;
}

.lightsalmon {
  background: lightsalmon; 
}

.expanded {
    z-index: 5;
}
＆＃13; 
<div id="wrapper" class="container problem">
  <div class="app-item">
    <h2>1</h2>
    <div class="app-item-dropdown">
      <button>click</button>
      <div class="box">
        <ul>
          <li>hello</li>
          <li>hello</li>
          <li>hellohello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hehellohellollo</li>
          <li>hello</li>
          <li>helhellolo</li>
          <li>hello</li>
        </ul>
      </div>
    </div>
  </div>
  
  <div class="app-item">
    <h2>2</h2>
    <div class="app-item-dropdown lightblue">
      <button>click</button>
      <div class="box">
        <ul>
          <li>hello</li>
          <li>hello</li>
          <li>hellohello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hehellohellollo</li>
          <li>hello</li>
          <li>helhellolo</li>
          <li>hello</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="app-item">
    <h2>3</h2>
    <div class="app-item-dropdown lightsalmon">
      <button>click</button>
      <div class="box">
        <ul>
          <li>hello</li>
          <li>hello</li>
          <li>hellohello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hehellohellollo</li>
          <li>hello</li>
          <li>helhellolo</li>
          <li>hello</li>
        </ul>
      </div>
    </div>
  </div>
</div>


<hr>
<h1>Solution</h1>
<h2>With <code>flex-direction: column-reverse</code> </h2>


<div id="wrapper2" class="container solution">
  <div class="app-item">
    <h2>1</h2>
    <div class="app-item-dropdown">
      <button>click</button>
      <div class="box">
        <ul>
          <li>hello</li>
          <li>hello</li>
          <li>hellohello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hehellohellollo</li>
          <li>hello</li>
          <li>helhellolo</li>
          <li>hello</li>
        </ul>
      </div>
    </div>
  </div>
  
  <div class="app-item">
    <h2>2</h2>
    <div class="app-item-dropdown lightblue">
      <button>click</button>
      <div class="box">
        <ul>
          <li>hello</li>
          <li>hello</li>
          <li>hellohello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hehellohellollo</li>
          <li>hello</li>
          <li>helhellolo</li>
          <li>hello</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="app-item">
    <h2>3</h2>
    <div class="app-item-dropdown lightsalmon">
      <button>click</button>
      <div class="box">
        <ul>
          <li>hello</li>
          <li>hello</li>
          <li>hellohello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hello</li>
          <li>hehellohellollo</li>
          <li>hello</li>
          <li>helhellolo</li>
          <li>hello</li>
        </ul>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题