CSS-P (Cascading Style Sheet - Position)
by K. Yue, copyright 2000
October 18, 2000
Introduction
- CSS-P is an extension to CSS that gives a developer pixel-level control
over the location of anything on the screen.
Example:
<DIV ID="mydiv"
STYLE="position: absolute; left: 100px; top: 50px; width: 80px; height:
40px; visibility: visible;">
HTML goes here
</DIV>
which is the same as
<DIV ID="mydiv" STYLE="position:absolute; left:100;
top:50; width:80;">
HTML goes here
</DIV>
- CSS-P allows:
- position HTML elements:
- absolutely
- relatively
- z order (for layering effects)
- hide and show HTML elements
Absolute Positioning
- Absolute positioning places the element at a precise location on the screen
by means of the 'top' and 'left' properties (such as 200 pixels over and 100
pixels down from the upper left corner).
- The contents of an element with a higher z-order may obscure the contents
of a element with a lower z-order.
- Absolute positioned elements define a new rectangular plane into which their
contents are rendered:
- Absolute positioned elements and their parent element are laid out independently.
- Each absolute positioned element forms a layer of its won.
- Absolute positioned elements define a new coordinate system for positioning
of child elements. This coordinate system has its origin at the top, left
corner of the element.
Relative Positioning
- Relative positioning first lays out the entire page by default, then offsets
the element from where it was placed by offset without disturbing the other
elements.
CSSP Properties
- By specifying the z order of elements on the page, elements can be stacked
on top of each other tocreate the appearance of having multiple layers of
content. (Elements with higher z order values appear "on top," "in
front" of elements with lower z order values.)
- Hiding and showing HTML elements to create the effect of conditional text.
- To support these effects, CSSP defines these additional properties and values
for Cascading Style Sheets.
| Property |
Value |
| position |
absolute | relative | static |
| left |
length | percentage | auto |
| top |
length | percentage | auto |
| width |
length | percentage | auto |
| height |
length | percentage | auto |
| clip |
shape | auto |
| overflow |
none | clip | scroll |
| z-index |
auto | integer |
| visibility |
inherit | visible | hidden |
- The position property specifies what kind of positioning is being used.
- Most developers prefer absolute positioning because it gives fine control
over the placement of elements on the screen and removes the element from
the default text flow.
- Relative positioning offsets the element from its default position.
- Static leaves an element in its default location.
- The left and top properties set the position of the element's left and top
edges. The value auto specifies placement at the element's default location.
Note that the upper left corner has a coordinate of [0,0].
- The width and height properties set the element's dimension. The auto value
specifies default dimension.
- The clipping area defines the part of the element which is visible. Auto
(the default value) makes the whole element visible. The only clipping shape
allowed is a rectangle, specified by the notation rect (<top> <right>
<bottom> <left>).
- The overflow property specifies what happens when an element's contents
exceed the element's height or width. 'none' turns off clipping; 'clip' turns
it on.
- The z-index property specifies the element's z-dimension stacking order.
It is set to an integer. Higher values are "on top" (i.e. closer
to the user than lower values). auto lets the browser choose a default stacking
order.
- The visibility property determines whether an element's content can be seen.
The inherit value specifies the property to be inherited from that of the
containing element.
- Authors usually don't combine positioned and non-positioned text on the
same page; normally, all of the text is positioned or none of it is.
Examples:
noposition.html: not using any positioning.
<html>
<head>
<title>No Positioning</title>
<style TYPE="text/css">
#outer {color: red }
#inner { color: blue }
</style>
</head>
<body><p>Beginning
<span id=outer>
Outer content starts.
<span id=inner>Inner content.
</span>
Outer content ends.
</span>
End body.
</p></body>
</html>
absposition.html: using absolute positioning
<html>
<head>
<title>Absolute Positioning</title>
<style TYPE="text/css">
#outer { position: absolute;
top: 200px;
left: 200px;
color: red }
#inner { color: blue }
</style>
</head>
<body><p>Beginning
<span id=outer>
Outer content starts.
<span id=inner>Inner content.
</span>
Outer content ends.
</span>
End body.
</p></body>
</html>
relposition.html: using relative positioning.
<html>
<head>
<title>Relative Positioning</title>
<style TYPE="text/css">
#outer { position: relative;
top: 200px;
left: 200px;
color: red }
#inner { color: blue }
</style>
</head>
<body><p>Beginning
<span id=outer>
Outer content starts.
<span id=inner>Inner content.
</span>
Outer content ends.
</span>
End body.
</p></body>
</html>
zindex.html: a demo of using z-index.
<HTML>
<HEAD>
<TITLE>Z-Index Example</TITLE>
<STYLE TYPE="text/css">
#first { position:absolute; top: 100px; left: 100px; z-index: 1;
color: yellow }
#second { position:absolute; top: 103px; left: 103px; z-index: 2;
color: lime }
#third { position:absolute; top: 106px; left: 106px; z-index: 3;
color: fuchsia }
#fourth { position:absolute; top: 109px; left: 109px; z-index: 4;
color: red }
</STYLE>
</HEAD>
<BODY>
<H1>Demo: z-index</H1>
<P ID=first>Software Tools ...</P>
<P ID=second>Software Tools ...</P>
<P ID=third>Software Tools ...</P>
<P ID=fourth>Software Tools ...</P>
</BODY>
</HTML>