0
我正試圖移動此文本框。我嘗試用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"> [email protected]</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>
你的小提琴似乎略有不同。你想把文本移動到哪裏？ – Aer0
嘿航空，這裏是imgur http://imgur.com/a/TsY34。 –