Positionieren von Shapes
In diesem Thema wird VML beschrieben, ein Feature, das ab Windows Internet Explorer 9 veraltet ist. Webseiten und Anwendungen, die auf VML basieren, sollten zu SVG oder anderen allgemein unterstützten Standards migriert werden.
Hinweis
Seit Dezember 2011 wurde dieses Thema archiviert. Daher wird sie nicht mehr aktiv gepflegt. Weitere Informationen finden Sie unter Archivierte Inhalte. Informationen, Empfehlungen und Anleitungen zur aktuellen Version von Windows Internet Explorer finden Sie unter Internet Explorer Developer Center.
Sie haben gelernt, wie Sie mithilfe von VML Formen auf einer Webseite zeichnen und färben. In diesem Thema verwenden Sie VML, um Grafiken präzise auf einer Webseite zu positionieren.
VML verwendet dieselbe Syntax, die in den Abschnitten Box Model und Visual Rendering Model von CSS2 definiert ist, um Shapes auf einer Webseite zu positionieren. Sie können statisch, relativ oder absolut verwenden, um zu bestimmen, wo sich der Basispunkt auf einer Webseite befindet. Anschließend können Sie die Attribute des oberen und linken Stils verwenden, um den Offset des Basispunkts anzugeben, an dem das enthaltende Feld für die Form positioniert wird.
Sie können z-index auch verwenden, um die Z-Reihenfolge von Shapes auf einer Webseite anzugeben.
Darüber hinaus bietet VML Drehung und Drehung , um Formen zu drehen oder zu kippen.
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 in den Formatattributen oben und links 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 gezeigt:
<body>
Beginning of the shape:
<v:oval style='width:80pt;height:90pt' fillcolor="red" />
End.
</body>
Zurück zum Anfangrelative
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 in den Attributen des oberen und linken Stils bestimmt. Beachten Sie, dass das enthaltende Feld, das als relativ positioniert ist, Platz im Textfluss einnimmt.
In der folgenden VML-Darstellung wird das rote Oval beispielsweise 20 Punkte von links und 10 Punkt 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 das enthaltende Feld genau 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 (der gesamten Webseite) enthalten. Daher befindet sich der Basispunkt in der oberen linken Ecke der Webseite. Das enthaltende Feld für das Oval ist genau 20 Punkte von links und 10 Punkt von oben positioniert, relativ zur oberen linken Ecke der Webseite, wie in der folgenden Abbildung gezeigt:
<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 style-Attributs steuern. Der Wert dieses Attributs kann null, eine positive ganze Zahl oder eine negative ganze Zahl sein. Die Grafik mit einem größeren Z-Index-Wert wird oben in der Grafik angezeigt, die einen kleineren Z-Index-Wert aufweist. Wenn beide Grafiken denselben Z-Index-Wert haben, 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-index-Wert 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 ändern, wie in der folgenden VML-Darstellung gezeigt, würde sich das rote Oval hinter das blaue Rechteck verschieben.
<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 angeben, 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 Rotationsstilattribut verwenden, um anzugeben, wie viele Grad ein Shape auf seiner Achse drehen 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 rotation:90', können Sie die Form um 90 Grad im Uhrzeigersinn drehen.
flip
Sie können das Flip-Stilattribut verwenden, um eine Form gemäß der folgenden Tabelle auf ihre x- oder y-Achse zu kippen:
| Wert | BESCHREIBUNG |
|---|---|
| x | Drehen Sie die gedrehte Form um die y-Achse (Umkehren von x Ordinaten) |
| Y | Drehen Sie die gedrehte Form um die x-Achse (Umkehren von y-Ordinaten) |
Sowohl x als auch y können in der Flip-Eigenschaft angegeben werden.
Wenn Sie beispielsweise style='... eingeben flip:x y', drehen Sie die Form sowohl auf der x- als auch auf der y-Achse.
Zusammenfassung
Basierend auf dem, was Sie gelernt haben, können Sie ein Shape präzise auf einer Webseite positionieren, indem Sie die folgenden Schritte ausführen:
- Entscheiden Sie, wo das Shape auf einer Webseite angezeigt werden soll, und die Größe des Shapes.
- Geben Sie style='position:relativ (oder relativ)' 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 des Shapes anzugeben.