بالا

خلاصه مطلب

ویژگی CSS top قسمتی از موقعیت عناصر موقعیت داده شده (positioned elements) را مشخص می‌کند. این ویژگی تاثیری بر عناصری که موقعیت داده نشده اند (non-positioned)، ندارد.

برای عناصری که موقعیت مستقل دارند (آنهایی که همراه position: absolute یا position: fixed هستند)، فاصله‌ی بین ضلع بالای حاشیه از عنصر و ضلع بالای بلوک شامل خودش را مشخص می‌کند.

برای عناصری که موقعیت نسبی دارند (آنهایی که همراه position: relative هستند)، اندازه‌ی حرکتی که عنصر به زیر موقعیت عادی خود دارد مشخص می‌کند.

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

Initial valueauto
Applies topositioned elements
Inheritedno
Percentagesrefer to the height of the containing block
Mediavisual
Computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation typea length, percentage or calc();
Canonical orderthe 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!

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