top

با استفاده از ویژگی top می توان فاصله لبه بالایی عناصری که position گرفته اند را از مبداشان تعیین کرد.

برای درک این ویژگی باید با ویژگی position کاملا آشنا باشید.

به ویژگی هایی نظیر top ویژگی های آفست می گویند. دیگر ویژگی های مربوط به آفست عناصر left, right, bottom می باشند.

ویژگی های آفست فقط بر روی عناصری که position دارند تاثیر می گذارند و بر روی عناصر دیگر هیچ گونه تاثیری ندارند. و البته position عنصر هم باید از نوع غیر static باشد.

برای عنصری که حالت position آن relative باشد ویژگی top تعیین کننده فاصله لبه بالایی عنصر نسبت به مکان اولیه ای که داشته است, می باشد.

اگر حالت عنصر absolute باشد, فاصله لبه بالایی نسبت به عنصر پدری که حالت relative دارد تعیین می شود.

برای حالت های fixed و sticky این فاصله از viewport می باشد.

برای مقدار دهی به این ویژگی می توانید از هر واحدی استفاده کنید. مقدار منفی نیز مجاز می باشد. اگر از مقدار منفی استفاده کنید عنصر به سمت بالا جابجا خواهد شد. همانطور که مقدار مثبت باعث حرکت عنصر به سمت پایین می شود.

در مثال زیر لبه بالایی عنصر 50 پیکسل از لبه بالایی عنصر نگهدارنده اش فاصله می گیرد:

.container {
  position: relative;
}

.absolute-element {
  position: absolute;
  top: 50px;
  left: -20px;
}

اگر از مقدار درصدی استفاده شود, آن مقدار بر اساس ارتفاع عنصری است که عنصر ما بر اساس آن مکانش تعیین شده است. (توجه کنید که صرفا عنصر پدر, منظور نیست, بلکه شاید عنصری که عنصر ما نسبت به آن مکان می گیرد پدر بزرگش باشد نه پدر آن, شاید هم یکی از اجدادش باشد :) )

همانطور که در مثال زیر مشاهده می کنید %100 برای ویژگی top به معنای کل ارتفاع عنصری از پدرانش است که حالت relative دارد:

.container {
  position: relative;
}

.absolute-element {
  position: absolute;
  top: 100%;
  left: 0;
}

مقدار این ویژگی می تواند inherit نیز باشد. که به این معنی است که می تواند مقدارش را از مقدار عنصر پدرش ارث ببرد تا برابر با آن باشد.

همچنین مقدار top می تواند auto نیز باشد که در این صورت مکان عنصر وابسته به مقدار bottom خواهد بود. اما اگر مقدار bottom هم auto باشد, عنصر در راستای عمود فاصله ای از مکان اولیه اش نخواهد گرفت.

دموی زیر را بررسی کنید:

See the Pen top by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی مرورگر ها

ویژگی top در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, اندروید و iOS پشتیبانی می شود.