Question

z-index很难，现在对我来说太难了。我有一个带有固定sidenav（＃s03）的页面（＃s01），当被调用时，模态（＃s02）应该覆盖整个层，包括sidenav。

现在尽管z-index低于模态，但sidenav仍位于其上方。改变sidenav的z-index（点击时）可以解决问题，但我确定没有任何JavaScript的解决方案。

This codepen应该很好地证明我的问题。

实际覆盖sidenav需要什么CSS技巧？

HTML

<div id="s01">
  <div id="s02"></div>
</div>
<div id="s03"></div>

CSS

// main
#s01 {
  position: relative;
  width: 50vw;
  height: 100vh;
  background: red;
  z-index: 1;
  }

// reveal
#s02 {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 50vw;
  height: 100vh;
  background: darkblue;
  z-index: 3;
}

//sidenav
#s03 {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 200px;
  background: green;
  z-index: 2;
}

Answer 1

因为fixed位置元素与其余元素不共享相同的父元素：

<强> HTML

<div id="s01">
  <div id="s02">Modal!</div>
  <button id="mybutton">Click me!</button>
  <div id="s03"></div>
</div>

codepen

z-index属性指定元素的z顺序及其顺序后人。当元素重叠时，z顺序决定哪一个涵盖了另一个。具有较大z指数的元素通常覆盖一个较低的元素。

z-index

使用sidenav和modal

1 个答案: