Shape Position Example (VML)

Purpose

This example demonstrates the effect of position on VML shapes and surrounding content. The VML shapes are positioned relatively within an absolutely positioned DIV element.

Example

Code

<!-- Include the VML behavior -->
<style>v\:* { behavior:url(#default#VML);display:inline-block }</style>

<!-- Declare the VML namespace -->
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />

<div style="position:relative; background-color:#CCCCFF; border-width=0px; height:100px">
<v:oval style="position:absolute;left:10pt;top:20pt;width:100pt;height:80pt;z-index:1" fillcolor="red" />
<v:rect style="position:absolute;left:10pt;top:45pt;width:100pt;height:80pt;z-index:0" fillcolor="blue" />
</div>