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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

我可以用什么来代替translate3d

1 个答案: