Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

بالا

خلاصه مطلب

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

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

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

وقتی هر دو ویژگی 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
Animatableyes, 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 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

سازگاری مرورگر

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

Document Tags and Contributors

Tags: 
 Contributors to this page: Sebastianz, fscholz, dannyfox, cyletech
 Last updated by: Sebastianz,