ترتیب CSS Positioning (CSS-P) در DHTML

سی ای اس برائے ایچ تی ایم ایل عناصر کا استعمال کیا جاتا ہے.

实例

توضیحات:大多数 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 - 元素的堆叠次序
  • clip - 元素裁剪
  • overflow - 如何处理溢出的内容

Position

CSS 的 position 属性允许您控制文档中某个元素的定位。

position:relative

position:relative 属性可向对于一个元素的当前位置来定位此元素。

下面的例子把这个 div 元素定位到距离其正常位置右方 10 像素的位置:

div
{
position:relative;
left:10;
}

position:absolute

position:absolute 属性根据距离窗口的 margin 来定位一个元素。

下面的例子把这个 div 元素定位到距离其包含块左侧 margin 的右方 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 的上面。

Filters

فیلتر کی اپریشن کا استعمال آپ کیو کس میٹنو اپنے متنی اور تصویری آئیکنو کیو توسیع کردینو اپنایو کرسکو آپنو.

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 عناصر تغییر کرده است.
Cursors
از CSS برای تغییر سبک اشاره‌گر موس استفاده کنید.
Filters
از ویژگی filter برای تغییر سبک عنوان استفاده کنید.
Filters on Images
ویژگی filter نیز می‌تواند به تصاویر اعمال شود، در اینجا چند تصویر مثال داریم که ویژگی filter به آن‌ها اعمال شده است.
Watermark
تصویر پس‌زمینه که در هنگام اسکرول صفحه حرکت نمی‌کند.