خلاصه مطلب
ویژگی 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 |
| Animation type | a length, percentage or calc(); |
| 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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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 |
سازگاری مرورگر
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| 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 | ? | ? | ? | ? | ? | ? |