Html top: Свойство top | CSS справочник – top | CSS справочник

top | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+3.1+1.0+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края (рис. 1). В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя (рис. 2).

Рис. 1. Значение top относительно окна браузера

Рис. 2. Значение top относительно родителя

Синтаксис

top: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства top может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.

auto
Не изменяет положение элемента.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>top</title>
  <style>
   .menu { 
    position: absolute; /* Абсолютное позиционирование */
    left: 300px; /* Положение от левого края */
    top: 50px; /* Положение от верхнего края */
    width: 120px; /* Ширина блока */
    background: #e0e0e0; /* Цвет фона */
    border: 1px solid #000; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
   }
   .content { 
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Положение от левого края */
    top: 0; /* Положение от верхнего края */
    width: 280px; /* Ширина блока */
    background: #00a5b6; /* Цвет фона */
    color: white; /* Цвет текста */
    padding: 5px; /* Поля вокруг текста */
    padding-right: 60px; /* Отступ справа */
    text-align: justify; /* Выравнивание по ширине */ 
   }
  </style>
 </head>
 <body>
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
   diem nonummy nibh euismod tincidunt ut lacreet dolore magna 
   aliguam erat volutpat. Ut wisis enim ad minim veniam, quis 
   nostrud exerci tution ullamcorper suscipit lobortis nisl ut
   aliquip ex ea commodo consequat. Duis te feugifacilisi.
  </div>
  <div>
   Ut wisi enim ad minim veniam, quis nostrud exerci taion 
   ullamcorper suscipit lobortis nisl ut aliquip ex en 
   commodo consequat. 
  </div>
 </body>
</html>

Результат данного примера показан на рис. 3.

Рис. 2. Применение свойства top

Объектная модель

[window.]document.getElementById(«elementID»).style.top

Браузеры

В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Свойство top | CSS справочник

CSS свойства

Определение и применение

CSS свойство top указывает направление смещения позиционированного элемента от верхнего края.

Результат применения свойства top напрямую зависит от позиционирования элемента к которому оно применяется, т.е. элемент будет смещаться в зависимости от значения свойства position:

  1. position: relative; (элемент с относительным позиционированием) — при использовании свойства top элемент смещается вверх или вниз относительно его текущей позиции (положительное значение смещает вниз, отрицательное вверх). На примере top: 25px;
  2. position: absolute; (элемент с абсолютным позиционированием) — при использовании свойства top смещается вверх или вниз относительно верхнего края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию — static, иначе отсчёт будет вестись относительно верхнего края окна браузера (как при position: fixed;). На примере top: 40px;
  3. position: fixed;(элемент с фиксированным позиционированием) — при использовании свойства top элемент смещается вверх или вниз относительно верхнего края окна браузера. На примере top: 200px;
  4. position: static; (элемент со статическим позиционированием — по умолчанию) — значение свойства top не повлияют на позиционирование элемента.

Поддержка браузерами

CSS синтаксис:

top:"auto | length | initial | inherit";

JavaScript синтаксис:

object.style.top = "-100px"

Значения свойства

ЗначениеОписание
autoПозволяет браузеру вычислять положение от верхнего края. Это значение по умолчанию.
lengthОпределяет величину смещения (px, em, pt, и т.п.). Допускается использование отрицательных значений.
%Величина смещения, указанная в процентах от содержащего элемента. Допускается использование отрицательных значений.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html> <html> <head> <title>Свойство top.</title> <style> body { background-color:khaki; /* задаём задний фон цвета хаки */ } .relative { position:relative; /* элемент с относительным позиционированием */ top : 25px; * задаём смещение элемента вниз относительно его текущей позиции */ width 200px; /* задаём ширину блока */ height: 250px; /* задаём высоту блока */ border 5px solid; /* задаём стиль для границ сплошной и ширину 5px */ background-color:orange; /* задаём задний фон оранжевого цвета */ } .absolute { position:absolute; /* элемент с абсолютным позиционированием */ top : 40px; * задаём смещение элемента вниз относительно верхнего края его предка */ width 150px; /* задаём ширину блока */ height: 100px; /* задаём высоту блока */ border 5px solid green; /* задаём стиль для границ сплошной, ширину 5px и цвет зелёный */ } .fixed { position:fixed; /* элемент с фиксированным позиционированием */ top : 200px; * задаём смещение элемента вниз относительно верхнего края окна браузера */ width 150px; /* задаём ширину блока */ height: 100px; /* задаём высоту блока */ border 5px solid red; /* задаём стиль для границ сплошной, ширину 5px и цвет красный */ } </style> </head> <body> <div class = "relative">div position:relative;</div> <div class = "absolute">div position:absolute;</div> <div class = "fixed">div position:fixed;</div> </body> </html>
Пример смещения позиционированного элемента.CSS свойства

top | CSS справочник

Поддержка браузерами

12.0+ 5.0+ 1.0+ 1.0+ 6.0+ 1.0+

Описание

CSS свойство top указывает смещение позиционированного элемента относительно верхнего края. Как именно свойство top будет смещать элемент, зависит от конкретного значения свойства position:

  • Элемент с фиксированным позиционированием (position: fixed;) смещается вверх/вниз относительно верхнего края окна браузера.
  • Элемент с абсолютным позиционированием (position: absolute;) смещается вверх/вниз относительно верхнего края его первого позиционированного (не static) элемента предка. Если у элемента нет предка с позиционированием (relative, absolute или fixed), тогда он будет смещаться относительно верхнего края окна браузера.
  • Элемент с относительным позиционированием (position: relative;) смещается вверх/вниз относительно верхнего края его текущей позиции.
  • Для элемента со статическим позиционированием (position: static;) применение свойства top не даст никакого эффекта.

Примечание: допускается использование отрицательных значений.

Значение по умолчанию: auto
Применяется: к позиционированным элементам
Анимируется: да
Наследуется: нет
Версия: CSS2
Синтаксис JavaScript: object.style.top=»50px»

Синтаксис

top: auto|величина|inherit;

Значения свойства

Значение Описание
auto Элемент остаётся на своём месте.
величина Определяет величину смещения в единицах измерения, используемых в CSS.
% Величина смещения, указанная в процентах, обрабатывается следующим образом:
  • для элементов с фиксированным позиционированием величина смещения вычисляется в зависимости от высоты области отображения окна браузера
  • для элементов с абсолютным позиционированием величина смещения вычисляется в зависимости от высоты позиционированного элемента предка (учитывается только height + padding), если такого элемента предка нет, то величина смещения вычисляется в зависимости от высоты области отображения окна браузера
  • для элементов с относительным позиционированием величина смещения вычисляется в зависимости от высоты области содержимого родительского элемента (height)
inherit Указывает, что значение наследуется от родительского элемента.

Пример

Изменяйте значение для просмотра результата.

div#myBox {

background-color: yellow;
width: 100px;
position: relative;
top: 0px;
}

top | CSS | WebReference

Для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края (рис. 1). В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя (рис. 2).

Значение top относительно окна браузера

Рис. 1. Значение top относительно окна браузера

Значение top относительно родителя

Рис. 2. Значение top относительно родителя

Краткая информация

Значение по умолчаниюauto
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис ?

top: <размер> | <проценты> | auto

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение свойства top может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.

auto
Не изменяет положение элемента.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>top</title>
  <style>
   .menu { 
    position: absolute; /* Абсолютное позиционирование */
    left: 300px; /* Положение от левого края */
    top: 50px; /* Положение от верхнего края */
    width: 120px; /* Ширина блока */
    background: #e0e0e0; /* Цвет фона */
    border: 1px solid #000; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
   }
   .content { 
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Положение от левого края */
    top: 0; /* Положение от верхнего края */
    width: 280px; /* Ширина блока */
    background: #00a5b6; /* Цвет фона */
    color: white; /* Цвет текста */
    padding: 5px; /* Поля вокруг текста */
    padding-right: 60px; /* Отступ справа */
    text-align: justify; /* Выравнивание по ширине */ 
   }
  </style>
 </head>
 <body>
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
   diem nonummy nibh euismod tincidunt ut lacreet dolore magna 
   aliguam erat volutpat. Ut wisis enim ad minim veniam, quis 
   nostrud exerci tution ullamcorper suscipit lobortis nisl ut
   aliquip ex ea commodo consequat. Duis te feugifacilisi.
  </div>
  <div>
   Ut wisi enim ad minim veniam, quis nostrud exerci taion 
   ullamcorper suscipit lobortis nisl ut aliquip ex en 
   commodo consequat. 
  </div>
 </body>
</html>

Результат данного примера показан на рис. 3.

Применение свойства top

Рис. 2. Применение свойства top

Объектная модель

Примечание

В браузере Internet Explorer до версии 7 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 29.08.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *