DHTML CSS Positioning (CSS-P)
CSS is used to style HTML elements.
Examples
Note: Most of the DHTML examples require IE 4.0+, Netscape 7+, or Opera 7+!
position:relative
How to position an element relative to its normal position.
position:relative
How to position all headings relative to their normal position.
position:absolute
How to position an element using an absolute value.
(You can find more examples at the bottom of this page)
Which Attributes can be Used with CSS-P?
First, the element must specify the position attribute (relative or
absolute).
Then we can set the following CSS-P attributes:
- left - the element's left position
- top - the element's top position
- visibility - specifies whether an element should be visible or hidden
- z-index - the element's stack order
- clip - element clipping
- overflow - how overflow contents are handled
Position
The CSS position property allows you to control the positioning of an element in a document.
position:relative
The position:relative property positions an element relative to its current
position.
The following example positions the div element 10 pixels to the right
from where it's normally positioned:
div
{
position:relative;
left:10;
} |
position:absolute
The position:absolute property positions an element from the margins of
the window.
The following example positions the div element 10 pixels to the right
from the left-margin of its containing block:
div
{
position:absolute;
left:10;
} |
Visibility
The visibility property determines if an element is visible or not.
visibility:visible
The visibility:visible property makes the element visible.
h1
{
visibility:visible;
} |
visibility:hidden
The visibility:hidden property makes the element invisible.
h1
{
visibility:hidden;
} |
Z-index
The z-index property is used to place an element "behind" another element.
Default z-index is 0. The higher number the higher priority. z-index: -1 has
lower priority.
h1
{
z-index:1;
}h2
{
z-index:2;
} |
In the example above, if the h1 and h2
elements are positioned on top of each other, the h2 element will be positioned on
top of the h1 element.
Filters
The filter property allows you to add more style effects to your text and
images.
h1
{
width:100%;
filter:glow;
} |
Note: Always specify the width of the element if you want to use the filter
property.
The example above produces this output:
Different Filters
Note: Some of the Filter properties will not work unless the background-color
property is set to transparent!
| Property |
Argument |
Description |
Example |
| alpha |
opacity
finishopacity
style
startx
starty
finishx
finishy |
Allows you to set the opacity of the element |
filter:alpha(opacity=20, finishopacity=100, style=1, startx=0,
starty=0, finishx=140, finishy=270)
|
| blur |
add
direction
strength |
Makes the element blur |
filter:blur(add=true, direction=90,
strength=6); |
| chroma |
color |
Makes the specified color transparent |
filter:chroma(color=#ff0000) |
| fliph |
none |
Flips the element horizontally |
filter:fliph; |
| flipv |
none |
Flips the element vertically |
filter:flipv; |
| glow |
color
strength |
Makes the element glow |
filter:glow(color=#ff0000, strength=5); |
| gray |
none |
Renders the element in black and white |
filter:gray; |
| invert |
none |
Renders the element in its reverse color and
brightness values |
filter:invert; |
| mask |
color |
Renders the element with the specified
background color, and transparent foreground color |
filter:mask(color=#ff0000); |
| shadow |
color
direction |
Renders the element with a shadow |
filter:shadow(color=#ff0000, direction=90); |
| dropshadow |
color
offx
offy
positive |
Renders the element with a dropshadow |
filter:dropshadow(color=#ff0000, offx=5, offy=5,
positive=true); |
| wave |
add
freq
lightstrength
phase
strength |
Renders the element like a wave |
filter:wave(add=true, freq=1, lightstrength=3, phase=0,
strength=5) |
| xray |
none |
Renders the element in black and white with reverse
color and brightness values |
filter:xray; |
Background
The background property allows you to select your own background.
background-attachment:scroll
The background scrolls along with the rest of the page.
background-attachment:fixed
The background does not move when the rest of the page scrolls.
More Examples
Visibility
How to make an element invisible. Do you want the element to show or not?
Z-index
Z-index can be used to place an element "behind" another element,
using Z-index priority.
Z-index
Check that the elements now have changed their Z-index priority.
Cursors
Change the style of the mouse cursor with CSS.
Filters
Change the style of your headings using the filter property.
Filters on Images
The filter property can also be used on images, here are some filter examples which
look good on images.
Watermark
A background picture that does not move when the rest of the page is scrolling.
| 
HOME
Printer friendly page
