Question

我需要使用translateY()移动表单。

但是，我遇到的问题是，如果在Y轴上有任何div形式的表单，则该表单会隐藏div，而我无法从该表单下获取它在表格后显示。

任何建议如何解决？

.positions {
  /* div which is on the way of translateY() of the form */
  margin-top: 100px;
  text-align: center;
  font-size: 18px;
}

#views-exposed-form-membership-directory-block-1 {
  /* form */
  display: flex;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07);
  width: 100%;
  justify-content: space-between;
  padding: 25px 10px;
  transform: translateY(-101%);
}

Answer 1

您可以使用z-index CSS属性更改页面上的z轴位置。

如果您希望确保div位于form上方，请为其提供较高的z-index值。这样的事情应该可以解决问题：

.positions {
  z-index: 1000;
}

#views-exposed-form-membership-directory-block-1 {
  z-index: 500;
}

我将它们设置为1000和500，因为数字越高，它们在z轴上的位置就越高（501将显示在500上方）。我不知道您将使用.positions类有多少个div，所以我保留了500的缓冲区。如果只有一个div，则可以使用101来代替{{ 1}}和div代表100。

表单的translationY将div隐藏在其下，我无法将其移动到表单之后显示

1 个答案: