Introduction
Overview
History
Advice
Books
Tutorials

Shapes
Summary
rect
roundrect
line
polyline
curve
arc
oval
image
shape

Special Topics
group
shapetype
positioning
animation
stylesheets

Community
Web Sites
Mailing Lists
USENET
Vendors
News

GBIC >> VML >> Positioning

Positioning
One key feature of VML is that you can place the resulting shapes anywhere - over text, under text, on top of other shape. You can also have text wrap around VML shapes (or not). All this to within a pixel's accuracy.

Before You Start Positioning

Return to top of document

Before You Start

Before you can use VML within MSIE, there are two lines of code which must be added to your web page. First, the normal <HTML> tag should be replaced with the following:

    <html xmlns:v="urn:schemas-microsoft-com:vml">

Also, the following line must be placed in the <HEAD> section of the web page:

    <style> v\:* { behavior: url(#default#VML); }</style >

These two tags enable MSIE to recognize and render VML tags, such as the simple rectangle VML tags we've seen so far. With these two lines entered, the core HTML code will look like:

    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <style> v\:* { behavior: url(#default#VML); }</style >
    </head>
    <body>
    </body>
    </html>

Return to top of document

Positioning

Using the style position attribute, VML offers the ability to place shapes anywhere on the web page, to within a pixel's accuracy. There are three position attribute values, static, relative, and absolute. Each determines where a "base point" is defined, from which the top/left stype attributes are used to determine the upper left corner of the shape's bounding box.

Other positioning features include specifying the z-order of shapes on a web page, rotation of a shape, and the option to flip a shape.

The static position attribute value is the default, in which the bottom of the shape is set to the current position in the text flow (top/left stype attributes are ignored). In the example below, the red oval is positioned immediately after the text "Beginning of the shape:". The bounding box takes up space in the text flow.

Beginning of the shape: End. The following code shows how this is done.

    <v:oval style='width:80px;height:90px' fillcolor="red" />

The relative position attribute value lets you place the bounding box with an offset from the current position in the text flow. The top/left style attributes are used. In the example below, the red oval is positioned 50 pixels from the left and 10 pixels from the top relative to the current point in the text flow. The bounding box takes up space in the text flow.

Beginning of the shape: End.

The following code shows how this is done.

    <v:oval style='position:relative;left:20px;top:10px;_
              width:80px;height:90px;' fillcolor="red" />

The absolute position attribute value lets you place the bounding box at an exact distance from the top/left corner of its parent element (the HTML element that contains the shape). This generally means from the top/left corner of the web page. The bounding box does not take up space in the text flow. The following code shows positioning with respect to the top of the page (but is not rendered on this page). As another example, if the shape were placed in a <div> section, the top/left attributes would be with respect to the div area only.

    <v:oval style='position:relative;left:20px;top:10px _
             width:80px; height:90px;' fillcolor="red" />

The z-index style attribute can be used to determine the order of graphics in a stack, which is allowed by VML positioning. By default, the last shape appearing in the HTML code appears on top, but the z-index style attribute can be used to control the stack order. Its value can be any integer (negative/zero/positive) and the graphic that has a larger z-index value is displayed on top of the graphic that has a smaller z-index value. When both graphics have the same z-index value, the graphic that is listed last in the HTML code appears on top.

In this example, the red oval is displayed on top of the blue rectangle. This is because the z-index value of the red oval is greater than the z-index value of the blue rectangle.

The following code shows how this is done.

    <v:oval style='position:relative;left:10pt;top:10pt;_
           width:100pt; height:40pt;z-index: 1' fillcolor="red" />
    <v:rect style='position:relative;left:10pt;top:15pt;_
           width:100pt; height:40pt; z-index:0' fillcolor="blue" />

If you change the z-index, as shown in the following VML representation, the red oval would move behind the blue rectangle.

The following code shows how this is done.

    <v:oval style='position:relative;left:10pt;top:10pt;_
         width:100pt; height:40pt;z-index:0' fillcolor="red" />
    <v:rect style='position:relative;left:10pt;top:15pt;_
         width:100pt; height:40pt;z-index:1' fillcolor="blue" />

If you supply a negative integer, you can use z-index to position graphics behind the normal text flow, as shown in the following VML representation.

Beginning of the shape: End.

The following code shows how this is done.

    <v:oval style='position:relative;left:20px;top:10px;_
       z-index:-1; width:80px;height:90px;' fillcolor="red" />

The rotation style attribute to specify how many degrees you want a shape to turn on its axis. A positive value indicates a clockwise rotation; a negative value indicates a counter-clockwise rotation. For example, if you specify style='... rotation:90', you can rotate the shape 90 degrees clockwise.

Finally, the flip style attribute to flip a shape on its x or y axis according to the following rules:

Value Description
x Flip the rotated shape about the y axis (invert x ordinates)
y Flip the rotated shape about the x axis (invert y ordinates)

Both x and y may be specified in the flip property. For example, if you type style='... flip:x y', you will flip the shape on both its x and y axis.