Top css: margin-top | htmlbook.ru

Leave a Comment / Css / By /

top | htmlbook.ru

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

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

Значение по умолчаниюauto
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/REC-CSS2/visuren.html#propdef-top

Версии 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 не повлияют на позиционирование элемента.

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

Свойство
Chrome
Firefox
Opera
Safari
IExplorer
Edge
top1.01.06. 01.05.012.0

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 свойства

Padding — Tailwind CSS

p-0 padding: 0px;
px-0 padding-left: 0px; отступ-справа: 0px;
py-0 padding-top: 0px; отступ снизу: 0px;
pt-0 padding-top: 0px;
pr-0 padding-right: 0px;
pb-0 padding-bottom: 0px;
pl-0 padding-left: 0px;
p-px заполнение: 1px;
px-px padding-left: 1px; отступ справа: 1px;
py-px padding-top: 1px; отступ снизу: 1px;
pt-px padding-top: 1px;
pr-px padding-right: 1px;
pb-px padding-bottom: 1px;
pl-px padding-left: 1px;
p-0,5 набивка: 0,125 бэр; /* 2 пикселя */
px-0.
5		 padding-left: 0.125rem; /* 2 пикселя */ заполнение справа: 0,125 бэр; /* 2 пикселя */
ру-0,5 набивка-верх: 0,125 бэр; /* 2 пикселя */ прокладка-дно: 0,125 бэр; /* 2 пикселя */
pt-0,5 набивка-верх: 0,125 бэр; /* 2 пикселя */
пр-0,5 прокладка-правая: 0,125рем; /* 2 пикселя */
пб-0,5 набивка-дно: 0,125 бэр; /* 2 пикселя */
pl-0,5 набивка слева: 0,125 бэр; /* 2 пикселя */
стр-1 набивка: 0,25 бэр; /* 4 пикселя */
px-1 отступ слева: 0,25 бэр; /* 4 пикселя */ отступ-справа: 0,25 бэр; /* 4 пикселя */
ру-1 набивка-верх: 0,25 бэр; /* 4 пикселя */ прокладка-дно: 0,25 бэр; /* 4 пикселя */
pt-1 набивка-верх: 0,25 бэр; /* 4 пикселя */
пр-1 прокладка-справа: 0,25рем; /* 4 пикселя */
pb-1 набивка-дно: 0,25 бэр; /* 4 пикселя */
pl-1 прокладка слева: 0,25 бэр; /* 4 пикселя */
р-1,5 набивка: 0,375 бэр; /* 6 пикселей */
px-1. 5 padding-left: 0,375rem; /* 6 пикселей */ заполнение справа: 0,375 бэр; /* 6 пикселей */
ру-1,5 набивка-верх: 0,375 бэр; /* 6 пикселей */ набивка-дно: 0,375 бэр; /* 6 пикселей */
pt-1,5 набивка-верх: 0,375 бэр; /* 6 пикселей */
пр-1,5 прокладка-правая: 0,375рем; /* 6 пикселей */
пб-1,5 набивка-дно: 0,375 бэр; /* 6 пикселей */
pl-1,5 набивка слева: 0,375 бэр; /* 6 пикселей */
р-2 набивка: 0,5 бэр; /* 8 пикселей */
px-2 отступ слева: 0,5 бэр; /* 8 пикселей */ отступ-справа: 0,5 бэр; /* 8 пикселей */
ру-2 набивка-верх: 0,5 бэр; /* 8 пикселей */ прокладка-дно: 0,5 бэр; /* 8 пикселей */
pt-2 набивка-верх: 0,5 бэр; /* 8 пикселей */
пр-2 прокладка-правая: 0,5рем; /* 8 пикселей */
пб-2 набивка-дно: 0,5 бэр; /* 8 пикселей */
pl-2 прокладка слева: 0,5 бэр; /* 8 пикселей */
р-2,5 набивка: 0,625 бэр; /* 10 пикселей */
px-2. 5 padding-left: 0,625rem; /* 10 пикселей */ заполнение справа: 0,625 бэр; /* 10 пикселей */
ру-2,5 набивка-верх: 0,625 бэр; /* 10 пикселей */ набивка-дно: 0,625 бэр; /* 10 пикселей */
pt-2,5 набивка-верх: 0,625 бэр; /* 10 пикселей */
пр-2,5 прокладка-правая: 0,625рем; /* 10 пикселей */
пб-2,5 набивка-дно: 0,625 бэр; /* 10 пикселей */
pl-2,5 заполнение слева: 0,625 бэр; /* 10 пикселей */
p-3 набивка: 0,75 бэр; /* 12 пикселей */
px-3 отступ слева: 0,75 бэр; /* 12 пикселей */ отступ-справа: 0,75 бэр; /* 12 пикселей */
ру-3 набивка-верх: 0,75 бэр; /* 12 пикселей */ набивка-дно: 0,75 бэр; /* 12 пикселей */
pt-3 набивка-верх: 0,75 бэр; /* 12 пикселей */
пр-3 прокладка-правая: 0,75рем; /* 12 пикселей */
pb-3 набивка-дно: 0,75 бэр; /* 12 пикселей */
pl-3 набивка слева: 0,75 бэр; /* 12 пикселей */
р-3,5 набивка: 0,875 бэр; /* 14 пикселей */
px-3. 5 padding-left: 0.875rem; /* 14 пикселей */ заполнение справа: 0,875 бэр; /* 14 пикселей */
ру-3,5 набивка-верх: 0,875 бэр; /* 14 пикселей */ набивка-дно: 0,875 бэр; /* 14 пикселей */
пт-3,5 верхняя часть набивки: 0,875 бэр; /* 14 пикселей */
пр-3,5 прокладка-правая: 0,875рем; /* 14 пикселей */
пб-3,5 набивка-дно: 0,875 бэр; /* 14 пикселей */
pl-3,5 набивка слева: 0,875 бэр; /* 14 пикселей */
р-4 набивка: 1 бэр; /* 16 пикселей */
px-4 отступ слева: 1rem; /* 16 пикселей */ отступ-справа: 1rem; /* 16 пикселей */
ру-4 набивка-верх: 1рем; /* 16 пикселей */ обивка-низ: 1рем; /* 16 пикселей */
pt-4 набивка-верх: 1 бэр; /* 16 пикселей */
пр-4 прокладка-правая: 1рем; /* 16 пикселей */
пб-4 набивка-дно: 1бэр; /* 16 пикселей */
pl-4 набивка слева: 1rem; /* 16 пикселей */
p-5 набивка: 1,25 бэр; /* 20 пикселей */
пикс-5 прокладка слева: 1,25 бэр; /* 20 пикселей */ заполнение справа: 1,25 бэр; /* 20 пикселей */
ру-5 набивка-верх: 1,25 бэр; /* 20 пикселей */ набивка-дно: 1,25 бэр; /* 20 пикселей */
pt-5 набивка-верх: 1,25 бэр; /* 20 пикселей */
пр-5 прокладка-правая: 1,25рем; /* 20 пикселей */
pb-5 прокладка-дно: 1,25 бэр; /* 20 пикселей */
pl-5 прокладка слева: 1,25 бэр; /* 20 пикселей */
р-6 набивка: 1,5 бэр; /* 24 пикселя */
px-6 отступ слева: 1,5 бэр; /* 24 пикселя */ прокладка справа: 1,5 бэр; /* 24 пикселя */
ру-6 набивка-верх: 1,5рем; /* 24 пикселя */ набивка-дно: 1,5 бэр; /* 24 пикселя */
pt-6 набивка-верх: 1,5 бэр; /* 24 пикселя */
пр-6 прокладка-правая: 1. 5рем; /* 24 пикселя */
пб-6 набивка-дно: 1,5 бэр; /* 24 пикселя */
pl-6 набивка слева: 1,5 бэр; /* 24 пикселя */
p-7 набивка: 1,75 бэр; /* 28 пикселей */
px-7 отступ слева: 1,75 бэр; /* 28 пикселей */ заполнение справа: 1,75 бэр; /* 28 пикселей */
ру-7 набивка-верх: 1,75 бэр; /* 28 пикселей */ набивка-дно: 1,75 бэр; /* 28 пикселей */
pt-7 набивка-верх: 1,75 бэр; /* 28 пикселей */
пр-7 заполнение справа: 1,75 бэр; /* 28 пикселей */
pb-7 прокладка-дно: 1,75 бэр; /* 28 пикселей */
pl-7 набивка слева: 1,75 бэр; /* 28 пикселей */
p-8 набивка: 2rem; /* 32 пикселя */
px-8 отступ слева: 2rem; /* 32 пикселя */ отступ-справа: 2rem; /* 32 пикселя */
ру-8 набивка-верх: 2рем; /* 32 пикселя */ обивка-низ: 2рем; /* 32 пикселя */
pt-8 набивка-верх: 2рем; /* 32 пикселя */
пр-8 прокладка-правая: 2рем; /* 32 пикселя */
пб-8 набивка-дно: 2рем; /* 32 пикселя */
pl-8 набивка слева: 2rem; /* 32 пикселя */
p-9 набивка: 2,25 бэр; /* 36 пикселей */
px-9 отступ слева: 2,25 бэр; /* 36 пикселей */ заполнение справа: 2,25 бэр; /* 36 пикселей */
py-9 набивка-верх: 2,25 бэр; /* 36 пикселей */ обивка-дно: 2,25 бэр; /* 36 пикселей */
pt-9 набивка-верх: 2,25 бэр; /* 36 пикселей */
пр-9 прокладка-правая: 2,25рем; /* 36 пикселей */
pb-9 набивка-дно: 2,25 бэр; /* 36 пикселей */
pl-9 набивка слева: 2,25 бэр; /* 36 пикселей */
p-10 набивка: 2,5 бэр; /* 40 пикселей */
px-10 padding-left: 2. 5rem; /* 40 пикселей */ прокладка справа: 2,5 бэр; /* 40 пикселей */
ру-10 набивка-верх: 2,5рем; /* 40 пикселей */ обивка-низ: 2,5рем; /* 40 пикселей */
pt-10 набивка-верх: 2,5 бэр; /* 40 пикселей */
пр-10 прокладка-правая: 2,5рем; /* 40 пикселей */
пб-10 набивка-дно: 2,5 бэр; /* 40 пикселей */
pl-10 набивка слева: 2,5 бэр; /* 40 пикселей */
p-11 набивка: 2,75 бэр; /* 44 пикселя */
px-11 отступ слева: 2,75 бэр; /* 44 пикселя */ заполнение справа: 2,75 бэр; /* 44 пикселя */
ру-11 набивка-верх: 2,75 бэр; /* 44 пикселя */ набивка-дно: 2,75 бэр; /* 44 пикселя */
pt-11 набивка-верх: 2,75 бэр; /* 44 пикселя */
пр-11 прокладка-правая: 2,75рем; /* 44 пикселя */
пб-11 набивка-дно: 2,75 бэр; /* 44 пикселя */
pl-11 набивка слева: 2,75 бэр; /* 44 пикселя */
p-12 набивка: 3rem; /* 48 пикселей */
px-12 заполнение слева: 3rem; /* 48 пикселей */ отступ-справа: 3rem; /* 48 пикселей */
ру-12 набивка-верх: 3рем; /* 48 пикселей */ обивка-низ: 3рем; /* 48 пикселей */
pt-12 набивка-верх: 3рем; /* 48 пикселей */
пр-12 прокладка-правая: 3рем; /* 48 пикселей */
пб-12 набивка-дно: 3рем; /* 48 пикселей */
pl-12 набивка слева: 3rem; /* 48 пикселей */
р-14 набивка: 3,5рем; /* 56 пикселей */
px-14 заполнение слева: 3,5 бэр; /* 56 пикселей */ прокладка справа: 3,5 бэр; /* 56 пикселей */
ру-14 набивка-верх: 3,5рем; /* 56 пикселей */ набивка-дно: 3,5 бэр; /* 56 пикселей */
pt-14 набивка-верх: 3,5 бэр; /* 56 пикселей */
пр-14 прокладка-правая: 3,5рем; /* 56 пикселей */
пб-14 набивка-дно: 3,5рем; /* 56 пикселей */
pl-14 прокладка слева: 3,5 бэр; /* 56 пикселей */
р-16 набивка: 4рем; /* 64px */
px-16 заполнение слева: 4rem; /* 64px */ прокладка справа: 4rem; /* 64px */
ру-16 набивка-верх: 4рем; /* 64px */ обивка-низ: 4рем; /* 64px */
pt-16 набивка-верх: 4рем; /* 64px */
пр-16 прокладка-правая: 4рем; /* 64px */
пб-16 набивка-дно: 4рем; /* 64px */
pl-16 набивка слева: 4rem; /* 64px */
р-20 набивка: 5рем; /* 80 пикселей */
px-20 отступ слева: 5rem; /* 80 пикселей */ отступ-справа: 5rem; /* 80 пикселей */
ру-20 набивка-верх: 5рем; /* 80 пикселей */ обивка-низ: 5рем; /* 80 пикселей */
pt-20 набивка-верх: 5рем; /* 80 пикселей */
пр-20 прокладка-правая: 5рем; /* 80 пикселей */
пб-20 набивка-дно: 5рем; /* 80 пикселей */
pl-20 набивка слева: 5rem; /* 80 пикселей */
р-24 набивка: 6рем; /* 96 пикселей */
px-24 заполнение слева: 6rem; /* 96 пикселей */ прокладка справа: 6rem; /* 96 пикселей */
ру-24 набивка-верх: 6рем; /* 96 пикселей */ обивка-низ: 6рем; /* 96 пикселей */
пт-24 набивка-верх: 6рем; /* 96 пикселей */
пр-24 прокладка-правая: 6рем; /* 96 пикселей */
пб-24 набивка-дно: 6рем; /* 96 пикселей */
pl-24 набивка слева: 6rem; /* 96 пикселей */
р-28 набивка: 7рем; /* 112 пикселей */
px-28 отступ слева: 7rem; /* 112 пикселей */ прокладка справа: 7rem; /* 112 пикселей */
ру-28 набивка-верх: 7рем; /* 112 пикселей */ обивка-низ: 7рем; /* 112 пикселей */
pt-28 набивка-верх: 7рем; /* 112 пикселей */
пр-28 заполнение справа: 7rem; /* 112 пикселей */
пб-28 набивка-дно: 7рем; /* 112 пикселей */
pl-28 набивка слева: 7rem; /* 112 пикселей */
р-32 набивка: 8рем; /* 128 пикселей */
px-32 отступ слева: 8rem; /* 128 пикселей */ отступ-справа: 8rem; /* 128 пикселей */
ру-32 набивка-верх: 8рем; /* 128 пикселей */ обивка-низ: 8рем; /* 128 пикселей */
pt-32 набивка-верх: 8рем; /* 128 пикселей */
пр-32 прокладка-правая: 8рем; /* 128 пикселей */
пб-32 набивка-дно: 8рем; /* 128 пикселей */
pl-32 набивка слева: 8rem; /* 128 пикселей */
р-36 набивка: 9рем; /* 144px */
px-36 заполнение слева: 9rem; /* 144px */ отступ-справа: 9rem; /* 144px */
ру-36 набивка-верх: 9рем; /* 144px */ обивка-низ: 9рем; /* 144px */
пт-36 набивка-верх: 9рем; /* 144px */
пр-36 прокладка-правая: 9рем; /* 144px */
пб-36 набивка-дно: 9рем; /* 144px */
pl-36 набивка слева: 9rem; /* 144px */
р-40 набивка: 10рем; /* 160 пикселей */
px-40 отступ слева: 10rem; /* 160 пикселей */ отступ-справа: 10rem; /* 160 пикселей */
ру-40 набивка-верх: 10рем; /* 160 пикселей */ обивка-низ: 10рем; /* 160 пикселей */
пт-40 набивка-верх: 10рем; /* 160 пикселей */
пр-40 прокладка-правая: 10рем; /* 160 пикселей */
пб-40 набивка-дно: 10рем; /* 160 пикселей */
пл-40 заполнение слева: 10rem; /* 160 пикселей */
п-44 набивка: 11рем; /* 176 пикселей */
px-44 заполнение слева: 11rem; /* 176 пикселей */ прокладка справа: 11rem; /* 176 пикселей */
ру-44 набивка-верх: 11рем; /* 176 пикселей */ набивка-низ: 11рем; /* 176 пикселей */
пт-44 набивка-верх: 11рем; /* 176 пикселей */
пр-44 прокладка-правая: 11рем; /* 176 пикселей */
пб-44 набивка-дно: 11рем; /* 176 пикселей */
pl-44 прокладка слева: 11rem; /* 176 пикселей */
р-48 набивка: 12рем; /* 192px */
px-48 заполнение слева: 12rem; /* 192px */ прокладка справа: 12rem; /* 192px */
ру-48 набивка-верх: 12рем; /* 192px */ набивка-низ: 12рем; /* 192px */
пт-48 набивка-верх: 12рем; /* 192px */
пр-48 прокладка-правая: 12рем; /* 192px */
пб-48 набивка-дно: 12рем; /* 192px */
pl-48 прокладка слева: 12rem; /* 192px */
р-52 набивка: 13рем; /* 208 пикселей */
px-52 заполнение слева: 13rem; /* 208 пикселей */ прокладка справа: 13rem; /* 208 пикселей */
ру-52 набивка верха: 13 бэр; /* 208 пикселей */ обивка-низ: 13рем; /* 208 пикселей */
пт-52 набивка-верх: 13рем; /* 208 пикселей */
пр-52 прокладка-правая: 13рем; /* 208 пикселей */
пб-52 набивка-дно: 13рем; /* 208 пикселей */
pl-52 прокладка слева: 13rem; /* 208 пикселей */
р-56 набивка: 14рем; /* 224 пикселя */
пикс-56 прокладка слева: 14rem; /* 224 пикселя */ набивка-справа: 14rem; /* 224 пикселя */
ру-56 набивка-верх: 14рем; /* 224 пикселя */ обивка-низ: 14рем; /* 224 пикселя */
pt-56 набивка-верх: 14рем; /* 224 пикселя */
пр-56 прокладка-правая: 14рем; /* 224 пикселя */
пб-56 набивка-дно: 14рем; /* 224 пикселя */
pl-56 прокладка слева: 14rem; /* 224 пикселя */
р-60 прокладка: 15рем; /* 240 пикселей */
px-60 заполнение слева: 15 бэр; /* 240 пикселей */ набивка справа: 15рем; /* 240 пикселей */
ру-60 набивка-верх: 15рем; /* 240 пикселей */ обивка-низ: 15рем; /* 240 пикселей */
пт-60 набивка-верх: 15рем; /* 240 пикселей */
пр-60 прокладка-правая: 15рем; /* 240 пикселей */
пб-60 набивка-низ: 15рем; /* 240 пикселей */
pl-60 набивка слева: 15rem; /* 240 пикселей */
п-64 набивка: 16рем; /* 256 пикселей */
px-64 набивка слева: 16 бэр; /* 256 пикселей */ набивка-справа: 16rem; /* 256 пикселей */
ру-64 набивка-верх: 16рем; /* 256 пикселей */ обивка-низ: 16рем; /* 256 пикселей */
пт-64 набивка-верх: 16рем; /* 256 пикселей */
пр-64 прокладка-правая: 16рем; /* 256 пикселей */
пб-64 набивка-дно: 16рем; /* 256 пикселей */
pl-64 набивка слева: 16rem; /* 256 пикселей */
р-72 набивка: 18рем; /* 288 пикселей */
px-72 заполнение слева: 18rem; /* 288 пикселей */ набивка-справа: 18rem; /* 288 пикселей */
ру-72 набивка-верх: 18рем; /* 288 пикселей */ обивка-низ: 18рем; /* 288 пикселей */
pt-72 набивка верха: 18 бэр; /* 288 пикселей */
пр-72 прокладка-правая: 18рем; /* 288 пикселей */
пб-72 набивка-дно: 18рем; /* 288 пикселей */
pl-72 набивка слева: 18rem; /* 288 пикселей */
p-80 набивка: 20 бэр; /* 320 пикселей */
px-80 отступ слева: 20 бэр; /* 320 пикселей */ прокладка справа: 20рем; /* 320 пикселей */
ру-80 набивка-верх: 20рем; /* 320 пикселей */ обивка-низ: 20рем; /* 320 пикселей */
pt-80 набивка-верх: 20 бэр; /* 320 пикселей */
пр-80 прокладка-правая: 20рем; /* 320 пикселей */
пб-80 прокладка-дно: 20рем; /* 320 пикселей */
pl-80 прокладка слева: 20rem; /* 320 пикселей */
p-96 набивка: 24рем; /* 384px */
px-96 заполнение слева: 24rem; /* 384px */ набивка-справа: 24rem; /* 384px */
ру-96 набивка-верх: 24рем; /* 384px */ набивка-низ: 24рем; /* 384px */
pt-96 набивка: 24 бэр; /* 384px */
пр-96 прокладка-правая: 24рем; /* 384px */
пб-96 прокладка-дно: 24рем; /* 384px */
пл-96 прокладка слева: 24rem; /* 384px */

css — поведение top:auto; сбивает меня с толку

спросил

Изменено 11 лет, 8 месяцев назад

Просмотрено 10 тысяч раз

Привет Я действительно запутался в некоторых основах абсолютного позиционирования.

 

<голова>

<стиль>
#содержащийблок {
  положение: родственник;
  фон: зеленый;
}
#абс {
  положение: абсолютное;
  фон: синий;
  вверху: авто;
}


<тело>
<дел>
  
фу

  
полоса

При разметке, указанной выше, div#abs не перекрывает абзац foo.

Я знаю, что мог бы сделать это, задав для top значение 0, а не auto, но поскольку div#contentBlock не имеет заполнения, я думал, что auto и 0 сделают то же самое.

Однако, если абзац и div#abs меняются местами в исходном порядке -чтобы bar стоял перед foo -top: auto; работает именно так, как я ожидал.

Приветствуются любые пояснения!

0

На самом деле вы не позиционировали эти элементы, вы просто объявили, какой тип позиционирования вы хотите использовать. В этом случае 9Значение 1499 auto на самом деле ничего не делает, потому что элемент #abs в любом случае размещается именно там, где он обычно должен быть. Если вы удалили top: auto; , это никак не повлияет на элемент.

«bar» не перекрывает «foo», потому что вы не разместили его таким образом. Он содержится в элементе #contentBlock и располагается под элементом блока

, поскольку «foo» занимает дискретное пространство. Вы хотите переопределить это? Установите top или другие соответствующие значения позиции. Чтобы повторить то, что сказали другие, top:auto просто позиционирует верхнюю часть этого элемента настолько высоко, насколько позволяет пространство (что обычно делал бы элемент).

Для справки в будущем значение auto используется, когда родительское свойство CSS переопределяет стиль дочернего элемента. Например, предположим, что у вас есть более сложный код, в котором есть правило применения поля к каждому элементу div внутри блока #contentBlock. Если вы хотите изменить это обратно на нормальное, вы должны включить поле:авто; в вашем CSS-содержащем блоке.

Когда вы устанавливаете абсолютную позицию (относительную и т. д.) и не указываете новую позицию для элемента, он будет помещен туда, где он обычно оставался бы, если бы не было позиции: абсолютная.

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

это легко (J/K!), auto и 0 не одно и то же.. ну я имею в виду, что в большинстве случаев это

auto — это когда агент рендеринга (браузер) пытается решить, что вы имеете в виду. в случае № 1 выше агент рендеринга достаточно умен, чтобы знать, что есть предыдущий элемент, поэтому он допускает его

, как вы правильно указали, если вы явно скажете ему перейти к 0, он сделает то, что ему сказали

подкачка исходный порядок тот же, тогда он достаточно умен, чтобы знать, что ему больше ничего не предшествует, поэтому auto будет означать 0 в этом случае

5

Использование auto для верхнего (или левого) указывает браузеру расположить элемент точно так же, как если бы элемент имел ‘position: fixed’.