Position properties

Purpose

Defines a layout positioning scheme of generated boxes. These affect the positioning properties of any floating elements.

Controls

Properties

caption-side

Specifies the position of a caption in relation to a table.

Option	Description
bottom	Indicates that the caption should be placed after the table.
top	Indicates that the caption should be placed before the table.
inherit	The value of the property should be inherited from the parent element.

clear

Whether the current element allows preceding elements to float along its sides. The default value is 'none'.

Option	Description
both	No floating elements allowed.
left	No floating elements allowed on the left side.
none	Allows floating elements on both sides.
right	No floating elements allowed on the right side.
inherit	The value of the property should be inherited from the parent element.

direction

Applies to any element and is used with the directionality specifier, in the layout, to alter the appearance of the markup generated by MCS. The default value is 'ltr'.

Option	Description
ltr	Indicates that the writing direction is left-to-right.
rtl	Indicates that the writing direction is right-to-left.
inherit	The value of the property should be inherited from the parent element.

float

Specifies whether a box should float or not. The default value is 'none'.

Option	Description
left	The element should float to the left.
none	The element is not floated.
right	The element should float to the right
inherit	The value of the property should be inherited from the parent element.

position

Specifies an absolute or relative position of a box in relation to the normal text flow. The default value is 'static'.

Option	Description
absolute	Generates an absolutely positioned element. The element should be positioned relative to the first parent element that has a position other than static. The position of the element must be specified using the left, top, right, and bottom properties.
fixed	Generates an absolutely positioned element. The element should be positioned relative to the browser window. The position of the element is specified with the left, top, right, and bottom properties.
relative	Generates a relatively positioned element. The element should be positioned relative to its normal position.
static	Indicates that the element should occur in the normal flow.
inherit	The value of the property should be inherited from the parent element.

top, right, bottom, left

Sets offsets and units applied to a box depending on the value of the position property. The default value is 'auto'.

Option	Description
auto	Indicates that the browser should calculate the edge position.
<length>	Sets the edge position in length units.
<percentage>	Sets the edge position in % of containing element.
inherit	The value of the property should be inherited from the parent element.

vertical-align

Sets the relative vertical positioning in a line. The default value is 'baseline'.

Option	Description
baseline	Indicates that the baseline of the element should be aligned with the baseline of the parent element.
bottom	Indicates that the bottom of the element should be aligned with the element on the line.
middle	Specifies that the element should be placed in the middle of the parent element.
sub	Indicates that the element should eb aligned as subscript.
super	Indicates that the element should be aligned as superscript.
text-bottom	Indicates that the bottom of the element should be aligned with the parent element's font.
text-top	Specifies that the top of the element should be aligned with the parent element's font.
top	Indicates that the top of the element should be aligned with the tallest element on the line.
<length>	Lengthens or shrinks the element by the specified length.
<percentage>	Raises or lowers the element in a percent of the "line-height" property.
inherit	The value of the property should be inherited from the parent element.

z-index

Specifies the stack level of an element. The default value is 'auto'. Refer to the topic entitled Overlays for further information.

Option	Description
auto	The stack level of the generated box in the current stacking context is the same as its parent's box.
<integer>	Specifies the stack level of the element. Elements with greater stack levels are formatted in front of elements with fewer stack levels. Elements may have negative stack levels.
inherit	The value of the property should be inherited from the parent element.

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs">
  <head>
    <title>Position properties</title>
    <style type="text/css">
      .table1 {
        caption-side: bottom;
        clear: right;
        border-color: green;
        border-style: dotted;
        border-top-width: 15px;
        }
        object {
          vertical-align: sub;
        }
        .class1 {
          float: left
        }  
        .class2 {
          position: absolute;
          left: 100px;
          top: 120px;
          vertical-align: 20%;
        }  
    </style>
  </head>
  <body>
    <div class="class1">
      <p>Antenna Software is the world leader in Intelligent Content Delivery solutions. </p>
    </div>
    <div class="class2">
      <p><object src="http://localhost:8080/mcs/welcome/images/logo_sys_r_rgb_150.gif"
          srctype="image/gif"><param name="mcs-transcode" value="false"/></object>Antenna Software helps
        organizations solve the complexity of delivering the true mobile Internet to thousands of
        unique devices, without compromise, to the highest quality user experience, performance and
        reliability.</p>
    </div>
    <table class="table1">
      <caption>Antenna Software</caption>
      <tr>
        <td>Web Server</td>
        <td>Storefront</td>
      </tr>
      <tr>
        <td>BuzzCast</td>
        <td>Broker</td>
      </tr>
    </table>
  </body>
</html>

Related topics

• Style property categories
• Overlays