diff options
Diffstat (limited to 'files/fa/web/css/top/index.html')
| -rw-r--r-- | files/fa/web/css/top/index.html | 194 |
1 files changed, 194 insertions, 0 deletions
diff --git a/files/fa/web/css/top/index.html b/files/fa/web/css/top/index.html new file mode 100644 index 0000000000..b0b4af4e6f --- /dev/null +++ b/files/fa/web/css/top/index.html @@ -0,0 +1,194 @@ +--- +title: بالا +slug: Web/CSS/top +tags: + - top + - بالا +translation_of: Web/CSS/top +--- +<div dir="rtl">{{CSSRef}}</div> + +<h2 dir="rtl" id="Summary" name="Summary">خلاصه مطلب</h2> + +<p dir="rtl">ویژگی CSS <code>top</code> قسمتی از موقعیت عناصر موقعیت داده شده (positioned elements) را مشخص می‌کند. این ویژگی تاثیری بر عناصری که موقعیت داده نشده اند (non-positioned)، ندارد.</p> + +<p dir="rtl">برای عناصری که موقعیت مستقل دارند (آنهایی که همراه {{Cssxref("position")}}: <code>absolute</code> یا {{Cssxref("position")}}: <code>fixed</code> هستند)، فاصله‌ی بین ضلع بالای حاشیه از عنصر و ضلع بالای بلوک شامل خودش را مشخص می‌کند.</p> + +<p dir="rtl">برای عناصری که موقعیت نسبی دارند (آنهایی که همراه {{Cssxref("position")}}: <code>relative</code> هستند)، اندازه‌ی حرکتی که عنصر به زیر موقعیت عادی خود دارد مشخص می‌کند.</p> + +<p dir="rtl">وقتی هر دو ویژگی {{Cssxref("top")}} و {{Cssxref("bottom")}} تعیین شده باشند، موقعیت عنصر بیش از حد محدود هست و ویژگی {{Cssxref("top")}} اولویت دارد: مقدار محاسبه شده‌ی {{Cssxref("bottom")}} روی -{{Cssxref("top")}} قرار می گیرد، درحالی که مقدار خودش که تعیین گردیده نادیده گرفته می‌شود.</p> + +<p dir="rtl">{{cssinfo}}</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 /* <length> مقادیر */ +top: 2.4em + +top: 10% /* <percentages> of the height of the containing block */ + +top: auto + +top: inherit +</pre> + +<h3 dir="rtl" id="مقادیر">مقادیر</h3> + +<dl> + <dt dir="rtl"><code><طول></code></dt> + <dd dir="rtl">یک عدد منفی، null، یا مثبت هست که {{cssxref("<length>")}} نشان می‌دهد:</dd> + <dd> + <ul dir="rtl"> + <li>برای عناصر با موقعیت مستقل (absolutely)، فاصله ازقسمت بالایی (لبه ی بالای) بلوک را مشخص می کند؛</li> + <li>برای عناصر با موقعیت نسبی (relative)، اگر در حالت معمول (normal flow) موقعیتی (position) مشخص نشده باشد، عنصر نسبت به موقعیت معمول (normal) خود به سمت پایین حرکت می کند.</li> + </ul> + </dd> + <dt dir="rtl"><code><درصد></code></dt> + <dd dir="rtl">یک {{cssxref("<percentage>")}} از ارتفاع بلوک شامل است، همانطور که در <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>برای عناصر با موقعیت نسبی، جابجایی عنصر از موقعیت اصلی خود بر مبنای ویژگی {{Cssxref("bottom")}} تنظیم می‌شود، یا اگر {{Cssxref("bottom")}} هم <code>auto</code> باشد، عنصر را جابجا نمی‌کند.</li> + </ul> + </dd> + <dt dir="rtl"><code>به ارث بردن</code></dt> + <dd dir="rtl">کلیدواژه‌ای است که نشان می‌دهد مقدار همان مقداری است که از عنصر والد خود محاسبه شده است (ممکن است بلوک شامل عنصر نباشد).</dd> + <dd dir="rtl">مقدار نخست محاسبه می‌شود سپس بر اساس نوع آن که {{cssxref("<length>")}}، {{cssxref("<percentage>") }}، یا کلیدواژه‌ی <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"> <?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></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> |