DHTML CSS Positioning (CSS-P)

CSS służy do dodawania stylów do elementów HTML.

Przykład

Komentarz:Większość przykładów DHTML wymaga przeglądarek: IE 4.0+, Netscape 7+ lub Opera 7+!

position:relative
Jak pozycjonować ten element względem jego normalnej pozycji?
position:relative
Jak pozycjonować wszystkie nagłówki względem ich normalnej pozycji?
position:absolute
Jak zdefiniować element za pomocą wartości absolutnej?

Więcej przykładów można znaleźć na dole strony.

Które atrybuty można używać razem z CSS-P?

Po pierwsze, element musi mieć ustawiony atrybut 'position' (relative lub absolute).

Następnie mogę ustawić następujące atrybuty CSS-P:

  • left - pozycja lewa elementu
  • top - pozycja górna elementu
  • visibility - określenie, czy element powinien być widoczny lub ukryty
  • z-index - kolejność układania elementów
  • clip - przycinanie elementu
  • overflow - jak obsługiwać nadmiar treści

Position

Atrybut 'position' w CSS pozwala kontrolować pozycjonowanie elementu w dokumencie.

position:relative

Atrybut 'position:relative' pozwala umieścić element względem jego aktualnej pozycji.

Powyższy przykład umieszcza ten element div w pozycji 10 pikseli w prawo od jego normalnej pozycji.

div
{
position:relative;
left:10;
}

position:absolute

Atrybut 'position:absolute' umieszcza element na podstawie marginesu od okna.

Powyższy przykład umieszcza ten element div w pozycji 10 pikseli w prawo od prawego marginesu jego bloku zawierającego.

div
{
position:absolute;
left:10;
}

Visibility

Atrybut 'visibility' decyduje, czy element jest widoczny.

visibility:visible

Atrybut 'visibility: visible' pozwala pokazać element.

h1
{
visibility:visible;
}

visibility:hidden

Atrybut 'visibility: hidden' pozwala ukryć element.

h1
{
visibility:hidden;
}

Z-index

Atrybut 'z-index' pozwala umieścić jeden element za innym. Domyślna wartość 'z-index' to 0. Im wyższa wartość, tym większa priorytet. 'z-index: -1' oznacza niższy priorytet.

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

W powyższym przykładzie, jeśli h1 i h2 są nakładane na siebie, element h2 będzie położony nad h1.

Filters

Atrysta 'filter' pozwala dodać więcej efektów stylizacyjnych do tekstu i obrazów.

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

Komentarz:Aby użyć atrybutu filter, zawsze określ szerokość elementu.

Powyższy przykład generuje poniższy wynik:

Nagłówek

Różne filtry

Komentarz:Odwzorowanie niektórych atrybutów Filter nie działa, chyba że atrybut background-color ustawiony jest na transparent!

Atrybuty Parametry Opis Przykład
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 Pozwala ustawić przezroczystość elementu 
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
 Rozmyj elementy 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color Spraw, aby określony kolor był przezroczysty 
filter:chroma(
color=#ff0000)
fliph none Obróć elementy w poziomie filter:fliph;
flipv none Obróć elementy w pionie filter:flipv;
glow
  • color
  • strength
 Spraw, aby elementy świeciły się 
filter:glow(
color=#ff0000,
strength=5);
gray none Wyświetl elementy w czarno-białym kolorze filter:gray;
invert none Wyświetl elementy za pomocą odwróconych wartości koloru i jasności filter:invert;
mask color Wyświetl elementy z określonym kolorem tła i przezroczystym kolorem pierwszoplanowym 
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
 Wyświetl elementy z cieniem 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
 Wyświetl elementy z cieniem 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
 Wyświetl elementy w kształcie fali 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Wyświetl elementy w czarno-białym kolorze z wartościami kontrastu i jasności. filter:xray;

Background

Atrybut background pozwala wybrać własne tło.

background-attachment:scroll

Tło przewija się razem ze stroną.

background-attachment:fixed

Tło nie przesuwa się, gdy strona się przewija.

Więcej przykładów

Visibility
Jak uczynić element niewidocznym. Czy chcesz, aby element był widoczny, czy nie?
Z-index
Z-index można użyć do umieszczenia jednego elementu za innym, poprzez użycie kolejności Z-index.
Z-index
Zobacz, że kolejność Z-index elementu została zmieniona.
Kursors
Zmiana stylu kursora za pomocą CSS.
Filters
Użyj atrybutu filter, aby zmienić styl nagłówka.
Filters na obrazach
Atrybut filter również można zastosować do obrazów, oto kilka przykładów obrazów, które zastosowały atrybut filter.
Watermark
Obraz tła nie przesuwa się, gdy strona się przewija.