DHTML CSS Positioning (CSS-P)

CSS ayon sa pagdagdag ng estilo sa mga HTML na elemento.

Halimbawa

注释：Ang karamihan sa mga halimbawa ng DHTML ay nangangailangan ng IE 4.0+、Netscape 7+ o Opera 7+!

position:relative
Paano ilagay ang elemento sa posisyon na kaugnay sa kanilang normal na posisyon.
position:relative
Paano ilagay ang lahat ng mga titulo sa posisyon na kaugnay sa kanilang normal na posisyon.
position:absolute
Paano gamitin ang isang absolutong halaga upang tukuyin ang posisyon ng isang elemento.

Maaari mong mahanap ng mas maraming halimbawa sa ibaba ng pahina.

Ano ang mga aterya na puwedeng gamitin kasama ang CSS-P?

Una, ang elemento ay dapat may aterya ng position (relative o absolute).

Pagkatapos, maaari kong itakda ang mga sumusunod na aterya ng CSS-P:

  • Left - Ang posisyon ng kaliwa ng elemento
  • Top - Ang posisyon ng itaas ng elemento
  • Visibility - Pagtatakda kung ang elemento ay makikita o nakatago
  • Z-index - Ang pagkakahahalili ng elemento
  • Clip - Pagkikilus ng elemento
  • Overflow - Paano hahawakan ang lumalabas na nilalaman

Position

Ang aterya ng position sa CSS ay nagbibigay-makakalooban sa pagkontrol ng posisyon ng isang elemento sa dokumento.

position:relative

Ang aterya ng position:relative ay ginagamit upang ilagay ang elemento sa posisyon batay sa normal na posisyon ng elemento.

Ang halimbawa sa itaas ay naglagay ng div na elemento sa posisyon na malayuan ng 10 pixel sa kanang bahagi ng normal na posisyon.

div
{
position:relative;
left:10;
}

position:absolute

Ang aterya ng position:absolute ay ginagamit upang ilagay ang isang elemento sa posisyon batay sa margin ng window.

Ang halimbawa sa itaas ay naglagay ng div na elemento sa posisyon na malayuan ng 10 pixel sa kanang bahagi ng margin ng block na naglalagay.

div
{
position:absolute;
left:10;
}

Visibility

Ang aterya ng visibility ay ginagamit upang magdesisyon kung ang elemento ay makikita o hindi.

visibility:visible

Ang aterya ng visibility:visible ay ginagamit upang gawing makikita ang elemento.

h1
{
visibility:visible;
}

visibility:hidden

Ang aterya ng visibility:hidden ay ginagamit upang gawing hindi makikita ang elemento.

h1
{
visibility:hidden;
}

Z-index

Ang aterya ng z-index ay ginagamit upang ilagay ang isang elemento sa ibabaw ng ibang elemento. Ang default na halaga ng z-index ay 0. Ang mas mataas ang halaga, mas mataas ang kapangyarihan. Ang z-index: -1 ay mas mababang kapangyarihan.

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

Sa pagkakakitaan ng itaas, kung ang h1 at h2 ay nakapapakita, ang h2 na elemento ay makikita sa itaas ng h1.

Filters

Filter na ateryderyo ang pinagkakakalooban ng mas maraming estilong epekto sa teksto at imahen.

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

注释：若需要使用 filter 属性，请始终指定元素的宽度。

上面的例子产生下面的输出：

Header

不同的滤镜

注释：除非 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 Gumamit ng black and white upang ipakita ang mga elemento na may reversing at brightness values. filter:xray;

Background

Ang background property ay nagbibigay-daan sa iyo na pumili ng sarili mong background.

background-attachment:scroll

Ang background ay sumasailalim sa paggalaw ng pahina.

background-attachment:fixed

Ang background ay hindi sumasailalim sa paggalaw ng pahina.

More Examples

Visibility
Paano gagawing hindi nakikita ang isang elemento. Gusto mo bang ipakita o hindi ito?
Z-index
Maaaring gamitin ang Z-index upang ilagay ang isang elemento sa likod ng ibang elemento, sa pamamagitan ng paggamit ng pagkakasunod-sunod ng Z-index.
Z-index
Nakita mo na, nagbago na ang pagkakasunod-sunod ng Z-index ng elemento.
Cursors
Gumamit ng CSS upang baguhin ang estilo ng mouse cursor.
Filters
Gumamit ng filter property upang baguhin ang estilo ng titulo.
Filters on Images
Ang filter property ay maaaring gamitin sa mga image, narito ang ilang mga halimbawa ng mga image na nagamit ang filter property.
Watermark
Background image that does not move when the page scrolls.