خلاصه مطلب
ویژگی CSS top
قسمتی از موقعیت عناصر موقعیت داده شده (positioned elements) را مشخص میکند. این ویژگی تاثیری بر عناصری که موقعیت داده نشده اند (non-positioned)، ندارد.
برای عناصری که موقعیت مستقل دارند (آنهایی که همراه position
: absolute
یا position
: fixed
هستند)، فاصلهی بین ضلع بالای حاشیه از عنصر و ضلع بالای بلوک شامل خودش را مشخص میکند.
برای عناصری که موقعیت نسبی دارند (آنهایی که همراه position
: relative
هستند)، اندازهی حرکتی که عنصر به زیر موقعیت عادی خود دارد مشخص میکند.
وقتی هر دو ویژگی top
و bottom
تعیین شده باشند، موقعیت عنصر بیش از حد محدود هست و ویژگی top
اولویت دارد: مقدار محاسبه شدهی bottom
روی -top
قرار می گیرد، درحالی که مقدار خودش که تعیین گردیده نادیده گرفته میشود.
Initial value | auto |
---|---|
Applies to | positioned elements |
Inherited | no |
Percentages | refer to the height of the containing block |
Media | visual |
Computed value | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto |
Animatable | yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
روش استفاده
Formal syntax: <length> | <percentage> | auto
top: 3px /* <length> مقادیر */ top: 2.4em top: 10% /* <percentages> of the height of the containing block */ top: auto top: inherit
مقادیر
<طول>
- یک عدد منفی، null، یا مثبت هست که
<length>
نشان میدهد: -
- برای عناصر با موقعیت مستقل (absolutely)، فاصله ازقسمت بالایی (لبه ی بالای) بلوک را مشخص می کند؛
- برای عناصر با موقعیت نسبی (relative)، اگر در حالت معمول (normal flow) موقعیتی (position) مشخص نشده باشد، عنصر نسبت به موقعیت معمول (normal) خود به سمت پایین حرکت می کند.
<درصد>
- یک
<percentage>
از ارتفاع بلوک شامل است، همانطور که در خلاصه شرح داده شد مورد استفاده قرار میگیرد. خودکار
- کلیدواژهای است که بیان میکند:
به ارث بردن
- کلیدواژهای است که نشان میدهد مقدار همان مقداری است که از عنصر والد خود محاسبه شده است (ممکن است بلوک شامل عنصر نباشد).
- مقدار نخست محاسبه میشود سپس بر اساس نوع آن که
<length>
،<percentage>
، یا کلیدواژهیauto
است بکار میرود.
نمونهها
/* body میتواند با واحد px تعیین شود همینطور برای div */ body{ width: 100%; height: 100%; } /* برای div هم میتوان از واحد ٪ استفاده کرد */ div { position: absolute; left: 15%; top: 30%; bottom: 30%; width: 70%; height: 40%; text-align: left; border: 3px rgb(0,0,0) solid; }
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml" /> <title>Mozilla.org height top left width percentage CSS</title> <style type="text/css"> /* body میتواند با واحد px تعیین شود همینطور برای div */ body { width: 100%; height: 100%; } /* برای div هم میتوان از واحد ٪ استفاده کرد */ div { position: absolute; left: 15%; top: 30%; bottom: 30%; width: 70%; height: 40%; text-align: left; border: 3px rgb(0,0,0) solid; } </style> </head> <body> <center> <div> ...محتوای آزمایشی... </div> </center> </body> </html>
مشخصات
مشخصات | وضعیت | دیدگاه |
---|---|---|
CSS Transitions The definition of 'top' in that specification. |
Working Draft | Defines top as animatable. |
CSS Level 2 (Revision 1) The definition of 'top' in that specification. |
Recommendation | Initial specification |
سازگاری مرورگر
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? | ? |