DHTML CSS Positioning (CSS-P)

CSS is used to add styles to HTML elements.

Example

Note:Most DHTML examples require IE 4.0+、Netscape 7+ or Opera 7+!

position:relative
How to position this element relatively to the normal position of the element.
position:relative
How to position all the headings relatively to their normal position.
position:absolute
How to define an element using an absolute value.

You can find more examples at the bottom of the page.

Which properties can be used with CSS-P?

Firstly, the element must specify the 'position' property (relative or absolute).

Then, I can set the following CSS-P properties:

  • left - The left position of the element
  • top - The top position of the element
  • visibility - Specify whether an element should be visible or hidden
  • z-index - Element stacking order
  • clip - Element clipping
  • overflow - How to handle overflow content

Position

The 'position' property of CSS allows you to control the positioning of an element in the document.

position:relative

The 'position: relative' property can position this element relative to the current position of an element.

The following example positions this div element 10 pixels to the right of its normal position:

div
{
position:relative;
left:10;
}

position:absolute

The 'position: absolute' property positions an element based on the margin distance from the window.

The following example positions this div element 10 pixels to the right of the right margin of its containing block:

div
{
position:absolute;
left:10;
}

Visibility

The 'visibility' property determines whether 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 one element after another. The default value of 'z-index' is 0. The higher the value, the higher the priority. 'z-index: -1' has a lower priority.

h1
{
z-index:1;
}
h2
{
z-index:2;
}

In the above example, if h1 and h2 overlap each other, the h2 element will be above the h1 element.

Filters

The 'filter' property allows you to add more style effects to text and images.

h1
{
width:100%;
filter:glow;
}

Note:Always specify the width of the element when using the filter attribute.

The above example produces the following output:

Header

Different filters

Note:Some Filter attributes will not work unless the background-color attribute is set to transparent!

attribute parameters description example
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 allow 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
 blur elements 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color make specified color transparent 
filter:chroma(
color=#ff0000)
fliph none horizontally invert elements filter:fliph;
flipv none vertically invert elements filter:flipv;
glow
  • color
  • strength
 make elements glow 
filter:glow(
color=#ff0000,
strength=5);
gray none present elements in black and white filter:gray;
invert none present elements with inverted color and brightness values filter:invert;
mask color present elements with specified background color and transparent foreground color 
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
 present elements with shadow 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
 present elements with shadow 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
 present elements in a wavy pattern 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Display elements with reversed color and brightness values in black and white. filter:xray;

Background

The background property allows you to choose your own background.

background-attachment:scroll

The background scrolls with the page.

background-attachment:fixed

The background does not scroll with the page.

More Examples

Visibility
How to make an element invisible. Do you want this element to be displayed or not?
Z-index
Z-index can be used to place one element behind another element by using the Z-index order.
Z-index
Please look, the Z-index order of the element has changed.
Cursors
Change the style of the mouse pointer with CSS.
Filters
Use the filter property to change the style of the title.
Filters on Images
The filter property can also be applied to images, here are some examples of images that have applied the filter property.
Watermark
Background images that do not move when the page scrolls.