bottom Property
ویژگی bottom
در CSS موقعیت عنصر در راستای عمودی را مشخص می کند. این تاثیر بشرطی انجام می پذیرد که ویژگی position
در عنصر تعیین شده باشد.
چگونگی تاثیر مقدار bottom
به این بستگی دارد که ویژگی position
چه مقداری پذیرفته باشد.
- اگر مقدار
position
برابر باfixed
یاabsolute
باشد، ویژگیbottom
فاصله بین لبه پایینی عنصر و لبه پایینیِ عنصر ظرف یا در برگیرنده (container) را مشخص می کند. - اگر مقدار
position
برابر باrelative
باشد، ویژگیbottom
فاصله لبه پایینیِ عنصر حرکت داده شده با مکان پیشفرض آن را مشخص می کند. - اگر مقدار
position
برابر باstatic
باشد، ویژگیbottom
اثری نخواهد داشت.
نحوه نوشتار
bottom: auto; bottom: unset; bottom: 10px; bottom: 1.5rem; bottom: 50%;
مقادیر
auto
اجازه می دهد که مرورگر مقعیت عنصر را بر حسب لبه پایینی محاسبه کند.
length
موقعیت عنصر بر حسب لبه پایینی را در واحد های px
,em
,cm
مشخص می کند.
%
موقعیت لبه پایینی را بر حسب درصد در عنصر در نگهدارنده یا ظرف مشخض می کند.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم. با اسکرول کردن پنجره مشاهده می کنیم که چون مقدار position
در box2. برابر با fixed
است، به گوشه پایین و سمت چپ پنجره چسبیده است.
در عنصر box3. چون مقدار ویژگی position
برابر relative
است، مبنای موقعیت عنصر، موقعیت فعلی آن در حالت پیشفرض است، پس تغییری نمی کند.
html
<div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div>
css
body { height: 700px; } div { padding: 50px; background-color: dodgerblue; display: inline-block; float: left; margin-left: 15px; color: #ffffff; } .box1 { bottom: 0px; position: absolute; } .box2 { bottom: 0px; position: fixed; right: 110px; } .box3 { bottom: 0px; position: relative; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.