mozilla

Revision 403183 of بالا

  • Revision slug: Web/CSS/بالا
  • Revision title: بالا
  • Revision id: 403183
  • Created:
  • Creator: cyletech
  • Is current revision? خیر
  • توضیح شب پیش قسمتی از سند رسمی را ترجمه کردم و امشب به پایان رساندم.
Tags: 

Revision Content

{{CSSRef}}

خلاصه

ویژگی CSS top قسمتی از موقعیت عناصر موقعیت داده شده مشخص می‌کند. این ویژگی تاثیری بر عناصری که موقعیت موقعیت داده نشدند ندارد.

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

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

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

{{cssbox("top")}}

نحو

Formal syntax: {{csssyntax("top")}}
top: 3px         /* <length> values */
top: 2.4em

top: 10%         /* <percentages> of the height of the containing block */

top: auto

top: inherit

مقادیر

<طول>
یک عدد منفی، null، یا مثبت  هست که {{ xref_csslength() }} نشان می‌دهد:
  • برای عناصر با موقعیت مستقل، فاصله از بالای گوشه‌ی بلوک شامل؛
  • برای عناصر با موقعیت نسبی، جابجایی که عنصر به پایین موقعیت عادی خود در روند عادی می‌رود اگر موقعیتی برای روند مشخص نشده باشد.
<درصد>
یک {{ xref_csspercentage() }} از ارتفاع بلوک شامل است، همانطور که در خلاصه شرح داده شد مورد استفاده قرار می‌گیرد.
خودکار
کلیدواژه‌ای است که بیان می‌کند:
  • برای عناصر با موقعیت مستقل، موقعیت عنصر بر مبنای ویژگی {{Cssxref("bottom")}} و ارتفاع مربوط تنظیم می‌شود: auto بعنوان ارتفاع بر مبنای محتوا.
  • برای عناصر با موقعیت نسبی، جابجایی عنصر از موقعیت اصلی خود بر مبنای  ویژگی {{Cssxref("bottom")}} تنظیم می‌شود، یا اگر {{Cssxref("bottom")}} هم auto باشد، عنصر را جابجا نمی‌کند.
به ارث بردن
کلیدواژه‌ای است که نشان می‌دهد مقدار همان مقداری است که از عنصر والد خود محاسبه شده است (ممکن است بلوک شامل عنصر نباشد).
مقدار نخست محاسبه می‌شود سپس بر اساس نوع آن که {{ xref_csslength() }}، {{xref_csspercentage() }}، یا کلیدواژه‌ی 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>

مشخصات

مشخصات وضعیت دیدگاه
{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}} {{Spec2('CSS3 Transitions')}} Defines top as animatable.
{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}} {{Spec2('CSS2.1')}} Initial specification

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

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatVersionUnknown}} {{CompatGeckoDesktop("1")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

همچنین نگاه کنید به

  • {{CSS_Reference:Position}}

Revision Source

<div dir="rtl">
  {{CSSRef}}</div>
<h2 dir="rtl" id="Summary" name="Summary">خلاصه</h2>
<p dir="rtl">ویژگی CSS&nbsp;<code>top</code>&nbsp;قسمتی از موقعیت عناصر موقعیت داده شده مشخص می‌کند. این ویژگی تاثیری بر عناصری که موقعیت موقعیت داده نشدند ندارد.</p>
<p dir="rtl">برای عناصری که موقعیت مستقل دارند (آنهایی که همراه {{Cssxref("position")}}:&nbsp;<code>absolute</code> یا {{Cssxref("position")}}:&nbsp;<code>fixed</code> هستند)، فاصله‌ی بین ضلع بالای حاشیه از عنصر و ضلع بالای بلوک شامل خودش را مشخص می‌کند.</p>
<p dir="rtl">برای عناصری که موقعیت نسبی دارند (آنهایی که همراه {{Cssxref("position")}:&nbsp;<code>relative</code> هستند)، اندازه‌ی حرکتی که عنصر به زیر موقعیت عادی خود دارد مشخص می‌کند.</p>
<p dir="rtl">وقتی هر دو ویژگی {{Cssxref("top")}} و {{Cssxref("bottom")}} تعیین شده باشند، موقعیت عنصر بیش از حد محدود هست و ویژگی {{Cssxref("top")}} اولویت دارد: مقدار محاسبه شده‌ی {{Cssxref("bottom")}} روی -{{Cssxref("top")}} قرار گرفته است، درحالی که مقدار خودش که تعیین کردیده نادیده گرفته می‌شود.</p>
<p dir="rtl">{{cssbox("top")}}</p>
<h2 dir="rtl" id="Syntax" name="Syntax">نحو</h2>
<pre class="twopartsyntaxbox" dir="rtl">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("top")}}
</pre>
<pre dir="rtl">
top: 3px         /* &lt;length&gt; values */
top: 2.4em

top: 10%         /* &lt;percentages&gt; of the height of the containing block */

top: auto

top: inherit
</pre>
<h3 dir="rtl" id=".D9.85.D9.82.D8.A7.D8.AF.DB.8C.D8.B1">مقادیر</h3>
<dl>
  <dt dir="rtl">
    <code>&lt;طول&gt;</code></dt>
  <dd dir="rtl">
    یک عدد منفی، null، یا مثبت &nbsp;هست که {{ xref_csslength() }} نشان می‌دهد:</dd>
  <dd>
    <ul dir="rtl">
      <li>برای عناصر با موقعیت مستقل، فاصله از بالای گوشه‌ی بلوک شامل؛</li>
      <li>برای عناصر با موقعیت نسبی، جابجایی که عنصر به پایین موقعیت عادی خود در روند عادی می‌رود اگر موقعیتی برای روند مشخص نشده باشد.</li>
    </ul>
  </dd>
  <dt dir="rtl">
    <code>&lt;درصد&gt;</code></dt>
  <dd dir="rtl">
    یک {{ xref_csspercentage() }} از ارتفاع بلوک شامل است، همانطور که در <a href="#" title="#">خلاصه</a> شرح داده شد مورد استفاده قرار می‌گیرد.</dd>
  <dt dir="rtl">
    <code>خودکار</code></dt>
  <dd dir="rtl">
    کلیدواژه‌ای است که بیان می‌کند:</dd>
  <dd>
    <ul dir="rtl">
      <li>برای عناصر با موقعیت مستقل، موقعیت عنصر بر مبنای ویژگی {{Cssxref("bottom")}} و ارتفاع مربوط تنظیم می‌شود: <code>auto</code> بعنوان ارتفاع بر مبنای محتوا.</li>
      <li>برای عناصر با موقعیت نسبی، جابجایی عنصر از موقعیت اصلی خود بر مبنای &nbsp;ویژگی {{Cssxref("bottom")}} تنظیم می‌شود، یا اگر {{Cssxref("bottom")}} هم&nbsp;<code>auto</code> باشد، عنصر را جابجا نمی‌کند.</li>
    </ul>
  </dd>
  <dt dir="rtl">
    <code>به ارث بردن</code></dt>
  <dd dir="rtl">
    کلیدواژه‌ای است که نشان می‌دهد مقدار همان مقداری است که از عنصر والد خود محاسبه شده است (ممکن است بلوک شامل عنصر نباشد).</dd>
  <dd dir="rtl">
    مقدار نخست محاسبه می‌شود سپس بر اساس نوع آن که {{ xref_csslength() }}، {{xref_csspercentage() }}، یا کلیدواژه‌ی&nbsp;<code>auto</code> است بکار می‌رود.</dd>
</dl>
<h2 dir="rtl" id="Examples" name="Examples">نمونه‌ها</h2>
<pre class="brush: css" dir="rtl">
/* 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;
}</pre>
<pre class="brush: html" dir="rtl">
 &lt;?xml version="1.0" encoding="utf-8"?&gt;
 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
   &lt;head&gt;
     &lt;meta http-equiv="Content-Type" content="application/xhtml+xml" /&gt;
     &lt;title&gt;Mozilla.org height top left width percentage CSS&lt;/title&gt;
     &lt;style type="text/css"&gt;
       /* 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;
       }
     &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;center&gt;
        &lt;div&gt;
             ...محتوای آزمایشی...
        &lt;/div&gt;
      &lt;/center&gt;

   &lt;/body&gt;
 &lt;/html&gt;</pre>
<h2 dir="rtl" id="Specifications" name="Specifications">مشخصات</h2>
<table class="standard-table" dir="rtl">
  <thead>
    <tr>
      <th scope="col">مشخصات</th>
      <th scope="col">وضعیت</th>
      <th scope="col">دیدگاه</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}}</td>
      <td>{{Spec2('CSS3 Transitions')}}</td>
      <td>Defines <code>top</code> as animatable.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td>
      <td>{{Spec2('CSS2.1')}}</td>
      <td>Initial specification</td>
    </tr>
  </tbody>
</table>
<h2 dir="rtl" id="Browser_compatibility" name="Browser_compatibility">سازگاری مرورگر</h2>
<p dir="rtl">{{CompatibilityTable}}</p>
<div dir="rtl" id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoDesktop("1")}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div dir="rtl" id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 dir="rtl" id="See_also" name="See_also">همچنین نگاه کنید به</h2>
<ul>
  <li dir="rtl">{{CSS_Reference:Position}}</li>
</ul>
Revert to this revision