如何获得我的激活表格以与职位相关工作？

Question

我有以下激活形式，我试图使它使用相对位置而非绝对位置工作，因为据我了解，使用相对位置并不会使表格脱离正常流程，但由于某种原因，我无法移动表单并通过页面的特定部分。我只能将其移动到某个点，然后我的表单会消失...这是我的代码：

General: request
Request URL: https://servername.herokuapp.com/graphql
Request Method: OPTIONS
Status Code: 405 Method Not Allowed
Remote Address: 34.193.254.1:443
Referrer Policy: no-referrer-when-downgrade

Response Header
Access-Control-Allow-Methods: POST,GET,PUT,DELETE
Access-Control-Allow-Origin: http://www.domainname.co
Allow: GET, POST
Connection: keep-alive
Date: Fri, 23 Nov 2018 17:13:52 GMT
Server: Cowboy
Transfer-Encoding: chunked
Via: 1.1 vegur
X-Powered-By: Express

Request Header
Provisional headers are shown
Access-Control-Request-Headers: content-type,meteor-login-token
Access-Control-Request-Method: POST
Origin: http://www.domainname.co
Referer: http://www.domainname.co/search-panel?lat=xxxx&lng=xxx&address=xxxx&category=xxx
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36

Answer 1

我不知道为什么要将表单的位置设置为relative而不是absolute。排名默认为static。我认为删除position: relative上的div.activate应该可以满足您的需求。

div.activate {
  //position: relative; ### remove this ###
  left: 55em;
  bottom: -40em;
}

div.activate input {
  height: 40px;
  padding: 0px 5%;
  margin-bottom: 4px;
  border-radius: 10px solid black;
  background-color: #fff;
  font-family: arial;
  font-size: 16px;
  color: #111;
  display: inline-block;
  width: 18em;
  margin-top: 1em;
}

div.activate input::placeholder {
  color: #6A5ACD;
  opacity: 1;
  position: relative;
  left: .5em;
  font-size: 1em;
}

div.activate select {
  font-size: 1em;
  margin-top: 1em;
}

div.activate label {
  color: #008000;
  font-size: 1.5em;
  white-space: nowrap;
  position: relative;
  left: -2em;
}

div.activate_title h2 {
  position: relative;
  left: 12em;
  top: 5em;
  font-family: 'Lobster', cursive;
  font-size: 3em;
  text-decoration: underline;
}

div.activate button {
  width: 50%;
  height: 40px;
  border: none;
  background-color: #222;
  font-family: arial;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  position: relative;
  top: 40em;
  left: 5em;
  border-radius: 1em;
}

div.activate button:hover {
  background-color: #008000;
  color: #9932CC;
}

<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Kumar+One+Outline" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

<div class="activate_title">
  <h2>Activate your Membership Plan Here!</h2>
</div>
<div class="activate">
  <form class="signup-form" action="token_request.php" method="POST">
    <label>Token:</label>
    <br></br>
    <input type="text" name="token" placeholder="Enter Token">
    <br></br>
    <label>Username:</label>
    <br></br>
    <input type="text" name="uid" placeholder="Enter User Name">
    <br></br>
    <label id="email">Email Address:</label>
    <br></br>
    <input type="text" name="email" placeholder="Enter E-mail Address">
    <br></br>
    <label id="request">Request Activation For Which Subscriptionplan?</label>
    <br></br>
    <select name="subscription">
      <option value="Primer Level">primer</option>
      <option value="Level 1">Level 1</option>
      <option value="Level 2">Level 2</option>
      <option value="Level 3">Level 3</option>
    </select>
    <br><br>
    <button type="submit" name="submit">Activate Subscriptionplan!</button>
  </form>
</div>