固定位置不起作用

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 中你需要设置下面的属性

顶部
对
底部
离开如果设置上面属性一两个就可以实现固定位置

Answer 2

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

固定位置不起作用

Fixed position is not working

html

css

wordpress

contact-form-7

shortcode