mozilla
Your Search Results

    بالا

    خلاصه مطلب

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

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

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

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

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

    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: cyletech, dannyfox
    Last updated by: dannyfox,
    Hide Sidebar