26.01.2019 Views

XML Simplified

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Module 5<br />

Style Sheets<br />

Concepts<br />

5.3.11 Position Properties<br />

Every element's text is placed in a box of its own. Table 5.4 lists the CSS positioning properties to position<br />

the text inside the box. Note that the properties top, left, bottom, and right are used only if value of position<br />

property is not static.<br />

Property Description Possible Values<br />

position Property to place an element in a static, relative, absolute static, fixed,<br />

or fixed position<br />

relative or absolute<br />

top<br />

left<br />

bottom<br />

right<br />

Property specifying how far the top edge of an element is<br />

above/below the top edge of the parent element<br />

Property specifying how far the left edge of an element is<br />

to the right/left of the left edge of the parent element<br />

Property specifying how far the bottom edge of an element<br />

is above/below the bottom edge of the parent element<br />

Property specifying how far the right edge of an element is<br />

to the left/right of the right edge of the parent element<br />

5.3.12 Position Properties Example<br />

Table 5.4: Position Properties<br />

Let us study an example based on positioning properties of CSS.<br />

auto, integer or floating<br />

point values adhering to<br />

CSS length units<br />

auto, integer or floating<br />

point values adhering to<br />

CSS length units<br />

auto, integer or floating<br />

point values adhering to<br />

CSS length units<br />

auto, integer or floating<br />

point values adhering to<br />

CSS length units<br />

Figure 5.34 shows the code for style rules defined in Position.css file.<br />

Figure 5.34: <strong>XML</strong> File<br />

Version 1.0 © Aptech Limited<br />

<strong>XML</strong> <strong>Simplified</strong>

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!