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 پشتیبانی می کنند.