代码之家 › 专栏 › 技术社区 › verism

停止z索引对这些元素有什么影响?

z-index css

verism · 技术社区 · 9 年前

使用以下代码,我希望 <li> 切换时显示在按钮下方的元素。我搞不明白为什么不是这样,有人能解释一下吗?

$('#switch').on('click', function(){
    $(this).parent().toggleClass('open');
})

.container {
    display: block;
    height: 50px;
    width: 300px;
    z-index: 1;
}

#switch {
    display: inline-block;
    height: 50px;
    vertical-align: top;
    width: 50px;
    z-index: 10;
}

ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    text-indent: 0;
    vertical-align: top;
    z-index: 1;
}

li {
    background: red;
    display: inline-block;
    height: 50px;
    margin: 0 0 0 10px;
    padding: 0;
    transform: translateX(-100%);
    width: 50px;
    z-index: 0;
}

.open li {
    transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container open">
    <button id="switch">Click</button>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

2 回复 | 直到 9 年前

Alex Char 9 年前

z-index 工作需要声明职位:

$('#switch').on('click', function() {
  $(this).parent().toggleClass('open');
})

.container {
  display: block;
  height: 50px;
  width: 300px;
  z-index: 1;
}
#switch {
  position: relative;
  display: inline-block;
  height: 50px;
  vertical-align: top;
  width: 50px;
  z-index: 10;
}
ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  text-indent: 0;
  vertical-align: top;
  z-index: 1;
}
li {
  position: relative;
  background: red;
  display: inline-block;
  height: 50px;
  margin: 0 0 0 10px;
  padding: 0;
  transform: translateX(-100%);
  width: 50px;
  z-index: 0;
}
.open li {
  transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container open">
  <button id="switch">Click</button>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

AleshaOleg 9 年前

使用 z-index 具有 position: absolute; , position: relative; 或 position: fixed .

推荐文章

Kyle Lemon · 突出显示页脚背景和内容之间的跨距

7 年前

Valentyn Stets · Webpack 2 css加载程序在生产构建中替换z-index属性

7 年前

Nick · 浮动操作按钮z索引更改延迟

7 年前

Vandan Shah · 粘性表格标题结构中的不透明度问题

7 年前

norixxx · 当父内容将图像作为子内容,并且其他元素具有不透明度时,CSS堆栈顺序会发生变化

7 年前

assoonaspossible · 具有固定父元素的绝对定位元素上的z索引[重复]

7 年前

Ismail Rubad · z索引为1的元素位于祖父母的div下

7 年前

JV Lobo · 具有transform属性的元素内的子元素z索引

7 年前

Tog Porter · 如何让图像滚动到导航栏后面

7 年前

Jasminder Pal Singh · 复杂的Z指数叠加问题

7 年前