Свойство top

Справочник:

Свойство

Характеристики свойства

В каких браузерах работает?


8.0+	1.0+	3.5+	3.1+	1.0+	1.0+	1.0+

В каких версиях CSS используется?

CSS 1	CSS 2	CSS 2.1	CSS 3
-	+	+	+

Для чего используется?

Определяет положение объекта на странице по отношению к верхней стороне контейнера. Начальная точка отсчета зависит от позиционирования объекта на странице. Если установлено относительное позиционирование, то нулевая точка для свойства top начинается от начального положения объекта родительского элемента. При абсолютном - сверху от начала рабочего окна браузера. Стоит отметить, что свойство bottom отменяет действие top.

Как правильно задавать?

top:значение;

Какие могут быть значения?

Значением может выступать любое число во всех возможных единицах измерениях, поддерживаемых в CSS. При чем если указано отрицательное значение, то объект смещается вниз и наплывает на нижний соседний объект.

auto - возвращает начальное положение элемента.
inherit - копирует значения родительского объекта.

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство bottom</title>
  <style>
   div {
    top: 0px;
    position: absolute;
    background: #b04d4d;
	width:150px;
	height:75px;
	left:180px;
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

По итогу получаем

Тип CSS свойства:

Позиционирование