بالا - CSS: شیوه‌نامه‌های آبشاری

خلاصه مطلب

ویژگی 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> از ارتفاع بلوک شامل است، همانطور که در خلاصه شرح داده شد مورد استفاده قرار می‌گیرد.

خودکار

کلیدواژه‌ای است که بیان می‌کند:

برای عناصر با موقعیت مستقل، موقعیت عنصر بر مبنای ویژگی bottom و ارتفاع مربوط تنظیم می‌شود: auto بعنوان ارتفاع بر مبنای محتوا.
برای عناصر با موقعیت نسبی، جابجایی عنصر از موقعیت اصلی خود بر مبنای ویژگی bottom تنظیم می‌شود، یا اگر bottom هم auto باشد، عنصر را جابجا نمی‌کند.

به ارث بردن

کلیدواژه‌ای است که نشان می‌دهد مقدار همان مقداری است که از عنصر والد خود محاسبه شده است (ممکن است بلوک شامل عنصر نباشد).

مقدار نخست محاسبه می‌شود سپس بر اساس نوع آن که <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!

Desktop
Mobile

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	?	?	?	?	?	?