Positionieren von Formen
In diesem Thema wird VML beschrieben, ein Feature, das ab Windows Internet Explorer 9 als veraltet gilt. Webseiten und Anwendungen, die auf VML basieren, sollten zu SVG oder anderen weit verbreiteten Standards migriert werden.
Hinweis
Seit Dezember 2011 wurde dieses Thema archiviert. Daher wird sie nicht mehr aktiv verwaltet. Weitere Informationen finden Sie unter Archivierter Inhalt. Informationen, Empfehlungen und Anleitungen zur aktuellen Version von Windows Internet Explorer finden Sie unter Internet Explorer Developer Center.
Sie haben gelernt, wie Formen auf einer Webseite mithilfe von VML gezeichnet und farbig dargestellt werden. In diesem Thema verwenden Sie VML, um Grafiken auf einer Webseite genau zu positionieren.
VML verwendet die gleiche Syntax, die in den Abschnitten Box Model und Visual Rendering Model von CSS2 definiert ist, um Formen auf einer Webseite zu positionieren. Sie können statische, relativeoder absolute verwenden, um zu bestimmen, wo sich der Basispunkt auf einer Webseite befindet. Anschließend können Sie mithilfe der Stilattribute oben und links den Offset vom Basispunkt angeben, an dem das enthaltende Feld für die Form positioniert wird.
Sie können auch z-index verwenden, um die Z-Reihenfolge von Formen auf einer Webseite anzugeben.
Darüber hinaus bietet VML Drehung und Flip, um Formen zu drehen oder zu spiegeln.
In diesem Thema:
static
Der Standardpositionsstil ist statisch, wodurch Browser angewiesen werden, die Form am aktuellen Punkt (dem Basispunkt) im Textfluss zu positionieren und die Einstellungen im oberen und linken Format zu ignorieren.
In der folgenden VML-Darstellung wird das rote Oval beispielsweise unmittelbar nach dem Text "Anfang der Form:" positioniert, wie in der folgenden Abbildung dargestellt:

<body>
Beginning of the shape:
<v:oval style='width:80pt;height:90pt' fillcolor="red" />
End.
</body>
relative
Wenn Sie das Positionsformatattribut auf "relativ" festlegen, können Sie das enthaltende Feld mit einem Offset vom aktuellen Punkt (dem Basispunkt) im Textfluss platzieren. Der Offset wird durch die Einstellungen im oberen und linken Format bestimmt. Beachten Sie, dass das enthaltende Feld, das als relativ positioniert ist, Speicherplatz im Textfluss beansprucht.
In der folgenden VML-Darstellung wird das rote Oval beispielsweise 20 Punkte von links und 10 Punkte von oben relativ zum aktuellen Punkt im Textfluss positioniert, wie in der folgenden Abbildung dargestellt:

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;width:80pt;
height:90pt;' fillcolor="red" />
End.
</body>
absolute
Wenn Sie das Positionsformatattribut auf "absolut" festlegen, können Sie dem enthaltenden Feld einen exakten Abstand von der oberen linken Ecke (dem Basispunkt) des übergeordneten Elements (dem positionierten Element, das die Form enthält) platzieren. Beachten Sie, dass das enthaltende Feld, das als absolut positioniert ist, keinen Platz im Textfluss einnimmt.
In der folgenden VML-Darstellung ist beispielsweise das rote Oval im <body> -Element (die gesamte Webseite) enthalten. Daher befindet sich der Basispunkt in der linken oberen Ecke der Webseite. Das enthaltende Feld für das Oval wird genau 20 Punkte von links und 10 Punkte von oben relativ zur oberen linken Ecke der Webseite positioniert, wie in der folgenden Abbildung dargestellt:

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt
width:80pt; height:90pt;' fillcolor="red" />
End.
</body>
z-index
Es ist möglich, eine Form zu positionieren, die eine andere Form überlappt. Normalerweise wird die Grafik, die zuletzt im HTML-Code aufgeführt ist, oben angezeigt.
In VML können Sie die Z-Reihenfolge mithilfe des z-index-Formatattributs steuern. Der Wert dieses Attributs kann 0 (null), eine positive ganze Zahl oder eine negative ganze Zahl sein. Die Grafik mit einem größeren Z-Indexwert wird über der Grafik mit einem kleineren Z-Indexwert angezeigt. Wenn beide Grafiken denselben Z-Indexwert aufweisen, wird die Grafik, die zuletzt im HTML-Code aufgeführt ist, oben angezeigt.
In der folgenden VML-Darstellung wird beispielsweise das rote Oval über dem blauen Rechteck angezeigt. Dies liegt daran, dass der Z-Indexwert des roten Ovals größer ist als der Z-Indexwert des blauen Rechtecks.

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index: 1'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt; z-index:0' fillcolor="blue" />
Wenn Sie den Z-Index wie in der folgenden VML-Darstellung gezeigt ändern, würde sich das rote Oval hinter dem blauen Rechteck bewegen.

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index:0'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt;z-index:1'
fillcolor="blue" />
Wenn Sie eine negative ganze Zahl bereitstellen, können Sie z-index verwenden, um Grafiken hinter dem normalen Textfluss zu positionieren, wie in der folgenden VML-Darstellung gezeigt.

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;z-index:-1;
width:80pt;height:90pt;' fillcolor="red" />
End.
</body>
Drehung
Sie können das Rotationsformatattribut verwenden, um anzugeben, wie viele Grad eine Form auf der Achse aktivieren soll. Ein positiver Wert gibt eine Drehung im Uhrzeigersinn an. Ein negativer Wert gibt eine Drehung gegen den Uhrzeigersinn an.
Wenn Sie z. B. style='... angeben, dreh:90' können Sie die Form um 90 Grad im Uhrzeigersinn drehen.
flip
Sie können das Flip-Style-Attribut verwenden, um eine Form auf der x- oder y-Achse gemäß der folgenden Tabelle zu spiegeln:
| Wert | BESCHREIBUNG |
|---|---|
| x | Drehen Sie die gedrehte Form um die y-Achse (X-Koordinaten umkehren). |
| Y | Drehen Sie die gedrehte Form um die x-Achse (invertierte y-Koordinaten). |
Sowohl x als auch y können in der Flip-Eigenschaft angegeben werden.
Wenn Sie z. B. style='... eingeben, flip:x y' wird die Form sowohl auf der x- als auch auf der y-Achse gekippt.
Zusammenfassung
Je nachdem, was Sie gelernt haben, können Sie eine Form auf einer Webseite genau positionieren, indem Sie die folgenden Schritte ausführen:
- Entscheiden Sie, wo die Form auf einer Webseite angezeigt werden soll, und legen Sie die Größe der Form fest.
- Geben Sie style='position:relative (or relative)' an, um den Basispunkt zu bestimmen.
- Verwenden Sie links und oben, um den Offset vom Basispunkt anzugeben.
- Verwenden Sie Breite und Höhe, um die Größe des enthaltenden Felds für die Form anzugeben.
- Verwenden Sie z-index, um die Z-Reihenfolge der Form anzugeben.
Zurück zum Anfang