固定位置不起作用

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>

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

我附上了整个CSS代码，以便查看某些属性是否与我在此处尝试实现的内容相矛盾。

谢谢！

Answer 1

你在button22中提到了position元素：悬停 但你应该加入它  button22             职位：固定;

Answer 2

在修复中，您需要设置以下属性

1. 顶
2. 右键
3. 底
4. 左 如果设置上述属性，则一个或两个可以使固定位置生效