我能用什么来代替translate3d

Question

因此，代码transform: translate3d(0,0,0);使position:fixed;无法工作。通过删除它，我现在可以再次使用position:fixed;了。一个问题是，我的导航栏是使用转换代码来打开的，我还能用什么方法让它做同样的事情呢？

这里的代码与转换代码，请记住，这已被删除。

.nav-content {
  flex: 1;
  box-shadow: 0 0 5px rgba(0,0,0,1);
  transform: translate3d(0,0,0);
  transition: transform .3s;
}

.nav-content.isOpen {
  transform: translate3d(220px,0,0);
}
.nav-content.isClosed {
  transform: translate3d(0,0,0);
}

Answer 1

即使对于固定的元素，转换也会建立包含块。没有解决办法。要么不使用转换，要么固定定位变得有点无用。

在这种情况下，如果您只使用translate3d向X方向进行转换，则只需使用带有左偏移量的相对位置。

.nav-content {
  position: relative;
  left: 0;
  transition: left .3s;
}
.nav-content.isOpen {
  left: 220px;
}

​

.nav-content {
  position: relative;
  left: 0;
  transition: left .3s;
  height: 200vh;
  border: 3px solid blue;
}
:checked ~ .nav-content {
  left: 220px;
}
.fixed {
  position: fixed;
}

<input type="checkbox" id="toggle" />
<label for="toggle">Toggle</label>
<div class="nav-content">
  <div class="fixed">I am fixed</div>
</div>

​