Question

我有几个部分的CSS问题。第一部分是我需要一个绝对定位的:after元素在固定位置元素上方可见。第二部分是我需要能够将模态作为覆盖整个屏幕的固定元素的子元素。这是我的应用的简化版。

HTML

<body>
  <div class='header'></div>
  <div class='nav'></div>
  <div class='content'>
    <div class='modal'></div>
  </div>
  <div class='footer'></div>
</body>

CSS

.header {
  position: fixed;
  height: 50px;
  width: 100%;
}

.nav {
  position: fixed;
  top: 50px;
  height: calc(100vh - 100px);
  width: 100px;
  z-index: 1;
}

.nav:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  margin: auto;
  height: 0;
  border-left: solid 10px black;
  border-top: solid 10px transparent;
  border-bottom: solid 10px transparent;
  }

.content {
  position: fixed;
  top: 50px;
  left: 100px;
  height: calc(100vh - 100px);
  width: calc(100vw - 100px);
}

.footer {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  z-index: 2;
}

编码：https://codepen.io/winterblack/pen/ypBOqz

我的内容元素可以是z-index: -1，也可以是导航元素上的z-index: 1。无论哪种方式，它都会妨碍模态，它必须将内容元素作为其父元素。

我现在能想到的最好的解决方案是在内容元素上使用z-index: -1，并在打开模态时将其删除。这将产生奇怪的效果，即在打开模态时绝对元素消失...可能不是太大的交易，但不是理想的。还有其他想法吗？

Answer 1

如果您将content的位置更改为亲戚，那么这对您正在尝试的内容是否妥协？

.content {
    position: relative;
    top: 50px;
    left: 100px;
    height: calc(100vh - 100px);
    width: calc(100vw - 100px);
    background: aquamarine;
}

逃避堆叠z-index的上下文

1 个答案: