Html body position top
CSS свойство top частично определяет вертикальную позицию позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. top не применится, если задано position: static ).
Интерактивный пример
Эффект свойства top зависит от того, как позиционируется элемент (то есть от значения свойства position ):
- Когда задано position: absolute или fixed — значение свойства top устанавливается как расстояние между верхней гранью элемента и верхней гранью родительского контейнера.
- Когда задано position: relative — значение свойство top устанавливается как расстояние, на которое смещается верхний край элемента от нормальной позиции.
- Когда задано position: sticky — свойство top работает так, как при position: relative во время нахождения элемента внутри области просмотра, и как position: fixed вне области просмотра.
- Когда задано position: static — свойство top не имеет никакого эффекта.
Когда заданы оба свойства top и bottom , а свойство position установлено как absolute или fixed , то оба свойства top и bottom учитываются. Во всех остальных ситуациях, если height как-либо ограничена или position установлено как relative , то свойство top будет учтено, а bottom — проигнорировано.
Синтаксис
/* Значения величин */ top: 3px; top: 2.4em; /* Процентные значения от высоты родительского блока */ top: 10%; /* Ключевое слово */ top: auto; /* Глобальные значения */ top: inherit; top: initial; top: unset;
Значения
Отрицательная, нулевая или положительная величина, которая представляет:
- для абсолютно позиционируемых элементов &mdash расстояние от верхнего края содержащего их блока;
- для относительно позиционируемых элементов &mdash расстояние, на которое элемент смещается вниз, относительно своего положения в нормальном потоке.
Процент от высоты родительского блока.
Это ключевое слово, которое означает:
- для абсолютно спозиционированных элементов — позиция элемента опирается на свойство bottom , пока height: auto обрабатывается как высота в зависимости от содержимого; если так же и bottom: auto , то элемент располагается так же, как при статическом позиционировании.
- для относительно спозиционированных элементов — расстояние элемента от его обычной позиции основано на свойстве bottom ; если значение bottom также auto , элемент вообще не перемещается по вертикали.
Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как , или ключевое слово auto .
Формальный синтаксис
Пример
/* Для body могут быть использованы единицы px, также и для div */ body width: 100%; height: 100%; > /* div теперь может использовать значения в процентах (body ширина и высота установлены) */ div position: absolute; left: 15%; top: 30%; bottom: 30%; width: 70%; height: 40%; text-align: left; border: 3px rgb(0,0,0) solid; >
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> head> meta http-equiv="Content-Type" content="application/xhtml+xml" /> title>Mozilla.org height top left width percentage CSStitle> style type="text/css"> /* Для body могут быть использованы единицы px, также и для div */ body width: 100%; height: 100%; > /* div теперь может использовать значения в процентах (body ширина и высота установлены) */ div position: absolute; left: 15%; top: 30%; bottom: 30%; width: 70%; height: 40%; text-align: left; border: 3px rgb(0,0,0) solid; > style> head> body> center> div> . Some content. div> center> body> html> Спецификации
Совместимость с браузерами
BCD tables only load in the browser
Found a content problem with this page?
This page was last modified on 7 нояб. 2022 г. by MDN contributors.
Your blueprint for a better internet.