Позиционирование CSS (CSS-P) в DHTML

CSS используется для добавления стилей к элементам HTML.

Пример

Комментарий:Большинство примеров DHTML требуют IE 4.0+、Netscape 7+ или Opera 7+!

position:relative
Как позиционировать этот элемент относительно его нормального положения.
position:relative
Как позиционировать все заголовки относительно их нормального положения.
position:absolute
Как определить элемент с помощью абсолютного значения.

Более подробные примеры можно найти в нижней части страницы.

Какие атрибуты можно использовать вместе с CSS-P?

Сначала элементу необходимо определить атрибут position (relative или absolute).

Затем я могу установить следующие свойства CSS-P:

  • left - левое положение элемента
  • top - верхнее положение элемента
  • visibility - определить, должен ли элемент быть видимым или скрытым
  • z-index - порядок stacking элементов
  • clip - обрезка элементов
  • overflow - как обрабатывать содержимое, которое выходит за пределы

Position

Атрибут position в CSS позволяет контролировать позиционирование элементов в документе.

position:relative

Атрибут position:relative позволяет позиционировать элемент относительно его текущего положения.

В следующем примере div-элемент позиционируется в положении справа от его нормального положения на 10 пикселей.

div
{
position:relative;
left:10;
}

position:absolute

Атрибут position:absolute позиционирует элемент в зависимости от маржина окна.

В следующем примере div-элемент позиционируется в положении справа от правого края маржина его контейнера на 10 пикселей.

div
{
position:absolute;
left:10;
}

Visibility

Атрибут visibility определяет, виден ли элемент.

visibility:visible

Атрибут visibility:visible делает элемент видимым.

h1
{
visibility:visible;
}

visibility:hidden

Атрибут visibility:hidden делает элемент невидимым.

h1
{
visibility:hidden;
}

Z-index

Атрибут z-index используется для размещения одного элемента за другим. Значение по умолчанию для z-index составляет 0. Чем больше значение, тем выше приоритет. z-index: -1 имеет более низкий приоритет.

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

В примере выше, если h1 и h2 наложены друг на друга, элемент h2 будет располагаться над h1.

Фильтры

Атрибут filter позволяет добавлять дополнительные стили к тексту и изображениям.

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

Комментарий:Если необходимо использовать свойство filter, всегда указывайте ширину элемента.

нижеприведенные примеры приводят к следующим результатам:

Заголовок

различные фильтры

Комментарий:если атрибут background-color не установлен в значение transparent, некоторые свойства Filter не будут работать!

атрибут параметр описание пример
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 позволяет вам установить прозрачность элемента 
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
 размыть элемент 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color сделать指定的 цвет прозрачным 
filter:chroma(
color=#ff0000)
fliph none поворот элемента горизонтально filter:fliph;
flipv none поворот элемента вертикально filter:flipv;
glow
  • color
  • strength
 сделать элемент светящимся 
filter:glow(
color=#ff0000,
strength=5);
gray none проявить элементы черно-белыми filter:gray;
invert none проявить элементы с инверсией цветов и яркости filter:invert;
mask color проявить элементы с заданным фоном и прозрачным передним планом 
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
 проявить элементы с тенью 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
 проявить элементы с тенью 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
 проявить элементы в виде волновой линии 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Использование черно-белого цвета для отображения элементов с обратными значениями и яркостью. filter:xray;

Background

Свойство background позволяет вам выбрать свой фоновый цвет.

background-attachment:scroll

Фон будет двигаться при прокрутке страницы.

background-attachment:fixed

Фон не будет двигаться при прокрутке страницы.

Более сложные примеры

Visibility
Как сделать элемент невидимым. Хотите ли вы, чтобы элемент был виден или нет?
Z-index
Z-index можно использовать для того, чтобы поместить один элемент за другим, используя порядок Z-index.
Z-index
Посмотрите, порядок Z-index элемента уже изменен.
Курсоры
Изменение стиля курсора с помощью CSS.
Фильтры
Использование свойства filter для изменения стиля заголовка.
Фильтры на изображениях
Свойство filter также можно применить к изображениям, вот несколько примеров изображений, на которых уже применено свойство filter.
Водяной знак
Фоновое изображение, которое не будет двигаться при прокрутке страницы.