Positionierung ein Formular über ein Bild

Ich habe das html für ein Bild habe ich ganz oben auf meiner website(ich arbeite aus der lokalen Dateien, die website ist noch nicht live, nur Herumspielen zuerst):

HTML:

<img id="top-header" src="images/top_header.jpg">

CSS:

#top-header {
   position: absolute;
   left: 0%;
   top: 0;
}

Auf dem Bild ist ein 3000X200 jpg-Bild

Ich habe ein Formular, das ich möchten, platzieren Sie rechts oben auf das Bild, um die sehr weit rechts im Bild.

(FORMULAR) HTML:

<form id="searchbox" action="" method="get">
<input >

Positionierung ein Formular über ein Bild

Wie würde ich gehen über das tun dies?

Legen Sie den hintergrund ein div auf das Bild, anstatt die img tag setzen Sie dann die form.
dafür, dass ich gues it ' s gonna take viel Aufwand für Sie, um alle Elemente in Platz. Warum nicht Einfach eine komplette form Machen und dann gehen Sie für das styling.
Ich sehr zweite, was JimJimmy1995 sagte.
was meinst du mit einer vollständigen form?

InformationsquelleAutor Seth Urquhart | 2013-04-15

1

Können Sie das gleiche tun mit der form variieren der linken Seite, wo Sie wollen es zu laden.

Demo: http://jsfiddle.net/lucuma/vV2ce/

CSS:
```
#top-header {
  position: absolute;
  left: 0%;
  top: 0;
}

#searchbox {
    position:absolute; 
    left: 1200px;
    display:inline-block;
    z-index:10
}

/* in my example #searchbox and form are the same so this depends on your overall '
   implementation 

   form {position:absolute; left: 1200px;display:inline-block;z-index:10}
*/
```
HTML:
```
<img id="top-header" src="http://placehold.it/1440x200">

<form id="searchbox" action="" method="get">
   Input <input type="text" />
</form>
```
was ist der untere Teil des Codes? html? css?
Es ist alles css. Der html-Code ist der gleiche wie in der Frage und sichtbar auf der demo-link.
Das ist Css. Wenn Sie nicht verstehen, dass ich denke, Sie sollten durch zu gehen w3schools.com/html/html_intro.asp und w3schools.com/css/css_intro.asp, zuerst bevor Sie Fragen stellen hier. Wir empfehlen, dass Sie ein wenig Forschung tun, bevor Sie jemanden bitten, zu Helfen.
Ist die form einer "id" oder "Klasse". Sorry ich verstehe grundlegende css, ich war einfach nicht sicher, wie die form verbunden mit den html?
form ist ein element. Bewerben können Sie css-Stile für alle Elemente, die form durch diesen code. Wenn es eine id wie dieses <form id="myform" > Sie könnte sich ändern, die css - #myform in diesem Fall ODER form#myform oder in deinem Fall #searchbox habe ich aktualisiert meine Antwort die Nutzung Ihrer id, da scheinen Sie mehr komfortabel mit.

InformationsquelleAutor lucuma
2

Warum stellst du position: absolute; wenn Sie einfach platzieren Sie es auf top und left null? Gibt es Container mit position: relative; ?

Einfach das Formular position: absolute; und positionieren Sie es oben und von Links nach 0.

Beide, das Bild und die form müssen in den gleichen container, d.h.:
```
<div id="container">
    <img/>
    <form></form>
</div>
```
mit css:
```
 #container {
     position: relative;
 }

 form {
     position: absolute;
     top: 0;
     left: 0;
 }
```
Eine weitere sehr gute alternative wäre die Nutzung eines hintergrund-Bild, wie vorgeschlagen, in den Kommentaren. In diesem Fall würden Sie nicht brauchen, ein container oder eine Positionierung oder ein Bild:
```
form {
    background: #FFF url('path/to/image') no-repeat top left;
}
```
Tut mir Leid, ich bin ganz neu hier. Was ist ein container? BTW, wenn ich entledigte sich die 'Links: 0%' das Bild nach rechts verschoben, etwa 3 Pixel oder so. Ich setzen Sie ihn auf null ein, um dieses problem zu lösen.
nur eine Art von HTML-element, es könnte auch der Körper selbst. Sie nicht wirklich brauchen position: absolute; auf dem Bild. So stellen Sie sicher, laden Sie ein reset-css, die auch unerwünschte browser-Formate.
Ich verwendete position: absoluts; auf mein Bild so ein, ich könnte ihn aus meinen anderen code. Lassen Sie mich Ihnen ein screenshot von meiner Website, so dass Sie sehen können, was ich auch den Umgang mit...
Dann wird es vor deinen anderen code wahrscheinlich.
für alle browser gilt, seine eigenen css vor einer Stil auf ein element. Google ein wenig zu suchen, wie Sie reset-browser-Stile..

InformationsquelleAutor nirazul
0

Statt mit einem img-tag, ein besserer Weg ist, um das Bild als hintergrund der form.
```
form {
   background: url('imagepath.png') no-repeat 0 0;
   text-align: right;
}
```
Dies ist eine gute Lösung auch, aber Sie brauchen, um stellen Sie sicher, und stellen Sie die Breite und Höhe des Formulars.
Der einzige Grund, warum ich nicht wollen, es zu tun auf diese Weise, dass ich will das Bild stehen allein aus der form. Ich will die form, getrennt zu sein von dem Bild, eher als das Bild, das abgesehen von der form. Danke für die Anregung!

InformationsquelleAutor carmina

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.