Свойство bottom - это ваш надёжный помощник, который позволяет точно смещать позиционированный элемент относительно его нижнего края. Однако важно понимать, что поведение этого свойства напрямую зависит от типа применённого позиционирования: - Для элементов с фиксированной позицией (position: fixed;) bottom управляет смещением вверх или вниз строго относительно нижней границы окна браузера.
- В случае абсолютного позиционирования (position: absolute;) элемент сдвигается от нижнего края ближайшего предка, имеющего иное позиционирование (не static). Если же такой «якорь» отсутствует, браузер автоматически привязывает смещение к нижнему краю окна просмотра.
- При относительном позиционировании (position: relative;) bottom слегка сдвигает элемент от его исходного места в потоке документа, сохраняя при этом занимаемую им область для последующих элементов.
- Стоит отметить, что для статического позиционирования (position: static;) попытка использовать bottom будет совершенно бесполезна - браузер просто проигнорирует это значение.
Примечание: не стесняйтесь экспериментировать с отрицательными значениями, они часто приносят неожиданные и полезные результаты! | Значение по умолчанию: | auto | | Наследуется: | нет | | Версия: | CSS2 | | Синтаксис JavaScript: | object.style.bottom="50px" | | Значение | Описание | | auto | Позволяет браузеру самостоятельно и оптимально вычислять положение нижнего края. | | расстояние | Задаёт конкретный отступ от нижнего края в любых единицах измерения, поддерживаемых стандартом CSS. | | % | Процентное смещение от нижнего края рассчитывается динамически: либо от высоты окна браузера (области просмотра), либо от высоты родительского элемента ( + ). | | inherit | Явно указывает, что текущий элемент должен унаследовать значение bottom от своего родителя. | Пример
|