ویژگی top در CSS

top Property

ویژگی top در CSS موقعیت عنصر را در محور عمودی تغییر می دهد. این ویژگی تنها عناصری را که به ویژگی position آنها مقدار داده شده است را تحت تاثیر قرار می دهد.

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

اگر position برابر با absolute باشد: ویژگی top فاصله بین لبه بالای عنصر را با لبه بالایی عنصر والدی که ویژگی position آن relative است، تعیین می کند.
اگر position برابر با relative باشد: ویژگی top فاصله عنصر را به نسبت مکان فعلی آن در محور عمودی تعیین می کند.
اگر position برابر با sticky باشد: ویژگی top مانند حالت relative عمل خواهد کرد.
اگر position برابر با fixed باشد: ویژگی top مانند حالت absolute عمل خواهد کرد با این تفاوت که عنصر والد viewport یا محدوده قابل رویت در مرورگر است و عنصر نسبت به آن مکان خود را تعیین می کند.
اگر position برابر static باشد: ویژگی top اثری نخواهد داشت.

نحوه نوشتار

top: 13px;
top: 3.3em;
top: 40%;
top: auto;

مقادیر

واحدهای اندازه

موقعیت عنصر را بر مبنای لبه بالا با واحدهای اندازه در CSS مانند px , em و rem ، تعیین می کند.

درصد

موقعیت عنصر را بر مبنای لبه بالا و درصدی از طول عنصر والد در نظر می گیرد.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<section>
      <div class="box1">
        <div class="box2"></div>
      </div>
</section>

css

body { padding: 15px 50px; }
section {
   border: 2px solid #333333;
   border-radius: 5px;
   width: 100%;
   height: 400px;
}
.box1 {
   background-color: lightgreen;
   position: relative;
   padding: 30px;
   width: 300px;
   height: 250px;
   top: 2.5rem;
   left: 25%;
}
.box2 {
   background-color: pink;
   width: 200px;
   height: 150px;
   top: 20px;
   right: 50px;
   position: absolute;
   top: 30px;
   text-align: center;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.