html - 如何定位文本框？

Question

我正在尝试移动这个文本框。我尝试使用 CSS 来获得它的位置，但没有取得太大的成功。关于我哪里出错的任何提示？

https://jsfiddle.net/048w32ar/

我试图定位文本的位置 http://imgur.com/a/TsY34

body {
  font-family: verdana;
  background: white;
  color: black;
}
}
.menu_div {
  background-color: #333;
  width: 100%;
}
ul {
  list-style-type: none;
  margin: 0 auto;
  display: table;
  padding: 0;
  z-index: 100;
  overflow: hidden;
}
li {
  float: left;
}
li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
  background-color: black;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 100;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  11.11% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  44.44% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.fadein {
  position: absolute;
  height: 500px;
  width: 49px;
  outline: 1px solid blue;
}
.fadein img {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  animation-name: fade;
  animation-duration: 9s;
  animation-iteration-count: infinite;
}
.fadein img:nth-child(1) {
  animation-delay: 0s;
}
.fadein img:nth-child(2) {
  animation-delay: 3s;
}
.fadein img:nth-child(3) {
  animation-delay: 6s;
}
.menu_div {
  position: relative;
  z-index: 0;
  height: 2.9em;
  margin-bottom: -0.4em;
  margin-top: 0em;
  z-index: 1000;
  background-color: #333
}
.fadein {
  position: relative;
  z-index: 3;
  background: ;
  width: 100%;
  left: -0.5px;
  top: 0em;
}
.fadein img {
  margin: 0 auto;
  width: 100%;
  max-width: 4060px;
  min-width: 900px;
  max-height: 400%;
}
.tech-slideshow {
  height: 200px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
  height: 100px;
  width: 100px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/collage.jpg);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
  animation: moveSlideshow 12s linear infinite;
}
.tech-slideshow .mover-2 {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  background-position: 0 -200px;
  animation: moveSlideshow 15s linear infinite;
}
.tech-slideshow:hover .mover-2 {
  opacity: 1;
}
@keyframes moveSlideshow {
  100% {
    transform: translateX(-66.6666%);
  }
}
form {
  background-color: #f7f7f7;
  border: 2px solid #CCCCCC;
  /* Just to center the form on the page */
  margin: auto;
  width: auto;
  height: auto;
  /* To see the limits of the form */
  padding: 10em;
}
div + div {
  margin-top: 0.3em;
}
label {
  /* To make sure that all label have the same size and are properly align */
  display: inline-block;
  width: 170px;
  text-align: left;
}
input,
textarea {
  /* To make sure that all text field have the same font settings
         By default, textarea are set with a monospace font */
  font: 1em verdana;
  /* To give the same size to all text field */
  width: 200px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* To harmonize the look & feel of text field border */
  border: 2px solid;
}
input:focus,
textarea:focus {
  /* To give a little highligh on active elements */
  border-color: black;
}
textarea {
  /* To properly align multiline text field with their label */
  vertical-align: top
  /* To give enough room to type some text */
  height: 23em;
  /* To allow users to resize any textarea vertically
         It works only on Chrome, Firefox and Safari */
  resize: vertical;
}
.button {
  /* To position the buttons to the same position of the text fields */
  padding-left: 400px;
  /* same size as the label elements */
}
button {
  /* This extra magin represent the same space as the space between
         the labels and their text fields */
  margin-left: 2em;
}
.container {
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.image-upload > input {
  display: none;
}
.image-upload img {
  width: 70px;
  cursor: pointer;
}
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  text-align: center;
  border: -0.2px solid #CCCCCC;
}
.flex-container > * {
  padding: 150px;
  -webkit-flex: 1 110%;
  flex: 1 100%;
  height: 40px;
  border: 4px solid #CCCCCC;
  width: 400px;
  height: 50px;
  font-size: 14pt;
}
.article {
  text-align: left;
  height: 200px;
  margin-bottom: 11px
}
header {
  background: white;
  color: black;
  font-size: 0.9em;
}
@media all and (min-width: 768px) {
  .nav {
    text-align: left;
    -webkit-flex: 1 auto;
    flex: 1 auto;
    -webkit-order: 1;
    order: 1;
  }
  .article {
    -webkit-flex: 5 0px;
    flex: 5 0px;
    -webkit-order: 2;
    order: 2;
  }
  footer {
    -webkit-order: 3;
    order: 3;
  }
}
.indexinfo {
  padding: 70px;
  -webkit-flex: 1 100%;
  flex: 1 110%;
  height: 70px;
  border: px solid black;
  height: 200px: text: center;
}
.sidebar-image-gallery {
  height: 700px;
  width: 1323px;
}
display:block;
 font-size:2em;
 margin-top:0.67em;
 margin-bottom:0.67em;
 margin-left:0;
 margin-right:0;
 font-weight:bold;

}
* {
  margin:0;
  padding:0;
  list-style:none;
  box-sizing:border-box;
}
.thumbnails {
  overflow:hidden;
}
.thumbnails li {
  float:center;
  width:10%;
  position:relative;
  padding:40px;
  min-height:100px;
  background-color:#fff;
  border:px solid #ccc;
  overflow:hidden;
}
.thumbnails li img {
  max-width:100%;
  display:block;
  position:absolute;
  max-height:100px;
  top:50%;
  transform:translate(-50%,
  -50%);
  left:50%;
}
footer {
  display:block;
  width:100%;
  background-color:#222;
  padding:70px 1px;
  font-size:20px;
  color:white {
    background-position: 5% 90%;
  }
}
.footer {
  display:flex;
  align-items:center;
}
.footer-img {
  width:100px;
  height:100px;
}
p {
  margin:0;
}
.textinfo {
  width:100 position:absolute;
  height:200px;
  border:3px solid #73AD21;
}

<div class="container">
  <h1 align="center">
       <a href="index.html"><img src="logo.png" alt="A.Willi A.G" /></a>
    </h1> 

  <div class="menu_div">
    <ul>
      <li><a href="index.html">Home</a>
      </li>
      <li><a href="kontakt.html">Kontakt</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropbtn">Bewerber</a>
        <div class="dropdown-content">
          <a href="info.html">Info</a>
          <a href="jobs.html">Jobs</a>
        </div>
      </li>
      <li class="dropdown"><a href="#" class="dropbtn">Kunde</a>
        <div class="dropdown-content">
          <a href="personalverleih.html">Personalverleih</a>
          <a href="toolrental.html">Werkzeuge Mieten</a>
          <a href="referenzen.html">Referenzen</a>
          <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
      </li>
      </div>
      <div class="fadein">
        <img src="welder6.png">
        <img src="welder1.png">
        <img src="welder1.png">
      </div>
      <div class="indexinfo"></div>
      <p style="text-align:center;">
        <div class=".textinfo">
          Die <font color="#004b77"><b>A.Willi A.G</b></font> ist als Personalverleiher in der gesamten Schweiz und im Ausland erfolgreich tätig mit über 30-jährige Erfahrung in dieser Sparte. Wir haben uns spezialisiert auf die Vermittlung und den Verleih
          von qualifiziertem Fachkräfte für Rohr-Stahl-Gebäudetechnik. Für die Beratung und Vermittlung sind in diesen Gebieten ausgewiesene Fachleute zuständig, welche als kompetente Partner mit unseren Kunden gemeinsam den Personaleinsatz planen. In
          der A.Willi AG sind über 100 erfahrene Facharbeiter im Einsatz. Unsere Personalberater haben in ihrem Vermittlungsbereich eine Fachausbildung und praktische Berufserfahrung sowie eine kaufmännische Weiterbildung. Als Spezialisten in ihrem Bereich
          erkennen sie schnell die Bedürfnisse unserer Kunden und vermitteln das entsprechend qualifizierte Fachpersonal. Sie sind die persönlichen Ansprechpartner während des gesamten Personaleinsatzes und garantieren durch regelmäßige Kontaktaufnahme
          eine optimale Anpassung an die Kundenbedürfnisse. Das,Fachkräfte das wir unseren Kunden zur Verfügung stellen, wird von unseren Personalconsultants gezielt ausgewählt. Wir verfügen über einen festen Bestand an fachlich ausgezeichneten und zuverlässigen
          Mitarbeitern. Ihre Fachkompetenz halten wir durch berufliche Weiterbildung auf dem aktuellen Stand. Die Fachkräfte verfügen über Erfahrungen im Bereich der Chemie, Bio, Pharma- und Lebensmittelindustrie, Öl- und Gaspipelines, Fernheizung und
          der Energieversorgung, Gebäudetechnik, Betriebsunterhaltung und Metallverarbeitung, Anlagen, Apparatebau, Stahlbau und Ausland Montage. Unsere Kunden schätzen die hohe Qualität unserer Dienstleistungen und die auf langfristigen Erfolg und faire
          Partnerschaft ausgerichtete Strategie. Wir sind stolz auf die gute Zusammenarbeit mit vielen langjährigen Kunden. Unser Ziel ist quantitatives und qualitatives Wachstum. Unsere Dienstleistungen verbessern wir kontinuierlich, um unseren Kunden
          einen individuellen, zuverlässigen und schnellen Service zu bieten. A. Willi AG= Personalberater= Fachkräfte= Kunden= Ziel
        </div>
      </p>
    </ul>
    <footer>
      <div class="footer">
        <img class="footer-img" src="location_icon.png" width="25">
        <div class="info-text">
          <p><font color="#fff"> Wasgenring 94, CH-4055 Basel-Stadt</font>
          </p>
        </div>
        <img class="footer-img" src="mail_icon.png" width="25">
        <div class="info-text">
          <p><font color="#fff"> info@awilli-ag.ch</font>
          </p>
        </div>
        <img class="footer-img" src="icon_phone.png" width="25">
        <div class="info-text">
          <p><font color="#fff">t +41 (0)79 322 14 20</font>
          </p>
        </div>
        <img class="footer-img" src="dossier_icon.png" width="25">
        <div class="info-text">
          <p><font color="#fff">Certificate</font>
          </p>
        </div>
    </footer>

Answer 1

这段代码:

 <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
</li>
</div>

关闭不好。 (li 和div，它们是相反的。尝试:

   <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
</div>
</li>

然后删除

<div class="indexinfo"></div>

之前

<div class="fadein"> 
   <img src="welder6.png">
   <img src="welder1.png">
   <img src="welder1.png"> 
</div>