Wie Absolute Positionierung für HTML5 und CSS3 Programmierung verwenden

Lassen Sie uns die absolute Positionierung Abenteuer beginnen, indem das Standard-Layout-Mechanismus unter Berücksichtigung. Hier können Sie eine HTML5-Seite mit zwei Absätzen auf ihm zu sehen. CSS können Sie jedem Absatz eine andere Farbe zu geben und eine bestimmte Höhe und Breite eingestellt werden. Die Positionierung wird mit dem Standard-Layout-Manager verlassen, die den zweiten (schwarz) Absatz direkt unter der ersten (blau) positioniert ein.

bild0.jpg

So richten Sie den HTML-Code

Der Code ist nicht überraschend:

boxes.html

Wenn Sie keine weitere Leitlinien Absätze (wie auch andere Elemente auf Blockebene) sind in der Regel vor der Wagenrücklauf zur Verfügung zu stellen und nach sich selbst, voneinander auf Stapeln. Die Standard-Layout-Techniken sicherzustellen, dass nichts jemals überlappt.

Wie erfolgt die Position Richtlinien hinzufügen

Schauen Sie sich etwas Neues: Die Absätze werden überlappende!

image1.jpg

Diese Leistung wird durch einige neue CSS-Attribute erreicht:

absPosition.html

Also, warum fragst du, wenn die Boxen überlappen? Nun, Sie könnten nicht egal, aber der interessante Teil ist dies: Sie können viel präziser Kontrolle über, wo die Elemente leben und welche Größe sie sind. Sie können sogar die normale Tendenz des Browsers außer Kraft setzen Elemente zu verhindern, überlappend, mit dem Sie einige interessante Möglichkeiten gibt.

Wie die absolute Positionierung Arbeit zu machen

Einige neue Teile CSS erlauben diese eine direktere Kontrolle über die Größe und Position dieser Elemente. Hier ist die CSS für eine der Boxen:

 #blueBox {background-color: blue-width: 100px; height: 100px; position: absolute-left: 0px; top: 0px; margin: 0px;}

  1. Stellen Sie den Position zuschreiben Absolute.

    Absolute Positionierung kann dazu verwendet werden, genau zu bestimmen (mehr oder weniger), wobei das Element auf dem Bildschirm platziert werden:

     Position: Absolut-

  2. Geben Sie ein links Position in der CSS.

    Nachdem Sie festgestellt, dass wird ein Element Absolute Position, ist es aus dem normalen Fluss entfernt, so sind Sie verpflichtet, seine Position zu fixieren. Das links Attribut legt fest, wo der linke Rand des Elements gehen wird. Dies kann mit einer der Messeinheiten angegeben werden, aber es wird typischerweise in Pixeln gemessen:

     left: 0px;

  3. Geben Sie ein oben Position mit CSS.

    Das Attribut gibt an, wo das obere Ende des Elements gehen. Auch dies ist in der Regel in Pixel angegeben:

     top: 0px;

  4. Verwenden Sie die Höhe und Breite Attribute die Größe zu bestimmen.

    Normalerweise, wenn Sie eine Position angeben, wollen Sie auch die Größe zu bestimmen:

     width: 100px; height: 100px;

  5. Stellen Sie die Ränder auf 0.

    Wenn Sie die absolute Positionierung verwenden, Sie trainieren ziemlich viel Kontrolle. Da Browser nicht identisch Margen behandeln, sind Sie besser dran Margen auf 0 setzen und den Abstand zwischen den Elementen manuell zu steuern:

     margin: 0px;

Im Allgemeinen verwenden Sie die absolute Positionierung nur auf benannte Elemente, anstatt Klassen oder allgemeine Elementtypen. Zum Beispiel werden Sie alle Absätze auf einer Seite nicht wollen, die gleiche Größe und Position zu haben, oder Sie konnten nicht sehen, sie alle. Absolute Positionierung arbeitet auf nur ein Element zu einem Zeitpunkt.

Ähnliche

Menü