خلاصه مطلب
ویژگی 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 | ? | ? | ? | ? | ? | ? |