Wie man ein Bild in einer festen Position auf einer Website zu überlagern

Cascading Stylesheets oder CSS, kann die Position eines Bildes auf einer Webseite definieren. CSS verwendet das Attribut "Position" um zu beschreiben, wie die Objekte auf einer Seite platziert werden; die häufigsten Positionierungsmethoden sind statische, feste, absolute und relative. Wenn ein Bild in festen Position ist, wird nie von seiner Lage auf der Website auch dann, wenn der Besucher das Fenster nach oben oder nach unten scrollt. Eine Kombination von HTML und CSS können Sie um ein Bild an einer beliebigen Stelle auf einer Website zu beheben.

Anweisungen

1 "< Style >" hinzufügen und "< / style >" zwischen den "< Head >" und "< / head >" Markierungen im Seitencode, so dass der HTML-Code die folgenden ähnelt:

< Head >< Stil >< / style >< / head >

2 ".Overlay {}" dazwischen "< Style >" hinzufügen und "< / style >" Markierungen, dann hinzufügen "Standpunkt: festgesetzt;" zwischen den gelockt geschweiften Klammern:

.Overlay {Position: fixed;}

3 Legen Sie den gewünschten Speicherort für das Bild mit "Links" und "Top"-Attribut. "Left" verschiebt das Bild auf der rechten Seite die angegebene Anzahl von Pixeln; "oben" verschiebt das Bild unten auf der Seite die angegebene Anzahl von Pixeln. Zum Beispiel:

.Overlay {Stellung: fixed; Top: 20px; Links: 300px;}

4 Fügen Sie das Tag "< Img >" dazwischen "< Körper >" und "< / body >" Tags, um das Bild auf der Seite zu überlagern. Legen Sie das Attribut "Src" und "Klasse", in dem "< Img >"-Tag:

< Img Src = "" Klasse = "" >

5 Legen Sie die Bild-URL zwischen den Anführungszeichen in das Feld "Src". Fügen Sie "Overlay" zwischen die Anführungszeichen in das Feld "Id":

< Img Src = "http://my website/picture.jpg" Class = "Überlagern" >