محاسبه موقعیت 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 - ترتیب قرارگیری عنصر
  • clip - برش عنصر
  • overflow - چگونه محتوای پر شده را مدیریت کنیم

Position

ویژگی position در CSS به شما اجازه می‌دهد تا موقعیت یک عنصر در مستند را کنترل کنید.

position:relative

ویژگی position:relative برای قرار دادن این عنصر بر اساس موقعیت فعلی آن استفاده می‌شود.

در مثال زیر، این عنصر div به فاصله 10 پیکسلی از سمت راست موقعیت معمولی خود قرار می‌گیرد:

div
{
position:relative;
left:10;
}

position:absolute

ویژگی position:absolute برای قرار دادن یک عنصر بر اساس حاشیه margin آن در پنجره قرار می‌دهد.

در مثال زیر، این عنصر div به فاصله 10 پیکسلی از سمت راست حاشیه margin محیط خود قرار می‌گیرد:

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

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