title: How to position text box?
body: <p>I'm trying to move this text box. I tried with CSS to get its position but not much success. Any tips to where I am going wrong? </p>
  
  <p><a href="https://jsfiddle.net/048w32ar/" rel="nofollow noreferrer">https://jsfiddle.net/048w32ar/</a></p>
  
  <p>where im trying to position text
  <a href="https://imgur.com/a/TsY34" rel="nofollow noreferrer">http://imgur.com/a/TsY34</a></p>
  
  <p><img src="https://i.imgur.com/tPLlDJH.png" alt=""></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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 &gt; 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 &amp; 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 &gt; 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 &gt; * {
    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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;h1 align="center"&gt;
         &lt;a href="index.html"&gt;&lt;img src="logo.png" alt="A.Willi A.G" /&gt;&lt;/a&gt;
      &lt;/h1&gt; 
  
    &lt;div class="menu_div"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="kontakt.html"&gt;Kontakt&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropbtn"&gt;Bewerber&lt;/a&gt;
          &lt;div class="dropdown-content"&gt;
            &lt;a href="info.html"&gt;Info&lt;/a&gt;
            &lt;a href="jobs.html"&gt;Jobs&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class="dropdown"&gt;&lt;a href="#" class="dropbtn"&gt;Kunde&lt;/a&gt;
          &lt;div class="dropdown-content"&gt;
            &lt;a href="personalverleih.html"&gt;Personalverleih&lt;/a&gt;
            &lt;a href="toolrental.html"&gt;Werkzeuge Mieten&lt;/a&gt;
            &lt;a href="referenzen.html"&gt;Referenzen&lt;/a&gt;
            &lt;a href="quali.html"&gt;Qulität, Sicherheit und Weiterbildung&lt;/a&gt;
        &lt;/li&gt;
        &lt;/div&gt;
        &lt;div class="fadein"&gt;
          &lt;img src="welder6.png"&gt;
          &lt;img src="welder1.png"&gt;
          &lt;img src="welder1.png"&gt;
        &lt;/div&gt;
        &lt;div class="indexinfo"&gt;&lt;/div&gt;
        &lt;p style="text-align:center;"&gt;
          &lt;div class=".textinfo"&gt;
            Die &lt;font color="#004b77"&gt;&lt;b&gt;A.Willi A.G&lt;/b&gt;&lt;/font&gt; 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
          &lt;/div&gt;
        &lt;/p&gt;
      &lt;/ul&gt;
      &lt;footer&gt;
        &lt;div class="footer"&gt;
          &lt;img class="footer-img" src="location_icon.png" width="25"&gt;
          &lt;div class="info-text"&gt;
            &lt;p&gt;&lt;font color="#fff"&gt; Wasgenring 94, CH-4055 Basel-Stadt&lt;/font&gt;
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;img class="footer-img" src="mail_icon.png" width="25"&gt;
          &lt;div class="info-text"&gt;
            &lt;p&gt;&lt;font color="#fff"&gt; info@awilli-ag.ch&lt;/font&gt;
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;img class="footer-img" src="icon_phone.png" width="25"&gt;
          &lt;div class="info-text"&gt;
            &lt;p&gt;&lt;font color="#fff"&gt;t +41 (0)79 322 14 20&lt;/font&gt;
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;img class="footer-img" src="dossier_icon.png" width="25"&gt;
          &lt;div class="info-text"&gt;
            &lt;p&gt;&lt;font color="#fff"&gt;Certificate&lt;/font&gt;
            &lt;/p&gt;
          &lt;/div&gt;
      &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>