固定位置不起作用

Question

我创建了一个带有联系表格 7 的表格：

input[type='text'],
input[type='tel'],
input[type="email"] {
  text-align: right;
  font-family: heebo;
  color: #001a71 !important;
  background-color: #ffffff !important;
  border: 1px solid #001a71 !important;
  font-size: 1.563em !important;
  height: 20px;
  margin-bottom: -30px !important;
  margin-top: -28px !important;
  width: 358.713px !important;
  margin: 0 60px;
  overflow: auto position:fixed;
}

textarea {
  height: 190px;
  text-align: right;
  font-family: heebo;
  color: #001a71 !important;
  background-color: #ffffff !important;
  border: 1px solid #001a71 !important;
  font-size: 1.563em !important;
  margin-top: -4px !important;
  width: 322.439px !important;
  overflow: auto position:fixed;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

#button-22 {
  text-transform: uppercase;
  background: #4a5ba8;
  color: white;
  border: 1px solid #4a5ba8;
  font-family: 'Heebo', sans-serif;
  font-size: 1.5em;
  font-weight: 300;
  transition: all 0.5s ease 0s;
  margin-left: -270px;
  margin-top: -20px;
  padding: 10px;
  float: left!important;
  overflow: auto position:fixed;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

#button-22:hover {
  text-transform: uppercase;
  background-color: transparent;
  color: #4a5ba8;
  border: 1px solid #4a5ba8;
  font-family: 'Heebo', sans-serif;
  font-size: 1.5em;
  font-weight: 300;
  transition: all 0.5s ease 0s;
  padding: 10px;
  margin-left: -270px;
  margin-top: -20px;
  float: left!important;
  position: fixed;
  overflow: auto transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

<div style="width:50%;padding:0 10px 0 0;float:left;">
  <label>[textarea* your-message "message"]</label>
</div>

<div style="width:50%;padding:0 10px 0 0;float:right;">
  <label>[text* your-name "name*"]</label>
</div>

<div style="width:50%;padding:0 10px 0 0;float:right;">
  <label>[text* company-name "company's name"]</label>
</div>

<div style="width:50%;padding:0 10px 0 0;float:right;">
  <label>[tel* tel-783 id:tel-783 class:tel-783 "phone*"]</label>
</div>

<div style="width:50%;padding:0 10px 0 0;float:right;">
  <label>[email email-731 id:email-731 class:email-731 "email"]</label>
</div>

<div style="width: 50px">
  <label>[submit id:button-22 class:button-22 "send"]</label>
</div>

我正在尝试修复所有字段，包括发送按钮的位置。无论浏览器的大小或屏幕分辨率如何，我都希望它们保持在同一个地方。经过研究，我发现应该添加transform: translatez(0)，这样当我添加position:fixed时我的字段就不会消失。但是，当我尝试不同的分辨率时，我可以看到我的字段移动了。

我附上了整个 CSS 代码，以查看某些属性是否与我在这里尝试实现的目标相矛盾。

谢谢！

Answer 1

在fixed中你需要设置下面的属性

1. 顶部
2. 对
3. 底部
4. 左 如果你设置上面的属性一两个就可以生效固定位置

Answer 2

您在 button22:hover 中提到了位置元素 但是你应该添加它 按钮22 位置：固定；