Left right top bottom: Допустимо ли использовать top, left, right и bottom css одновременно для определения размера элемента?

Position (absolute, relative и fixed) — способы позиционирования Html элементов в CSS (правила left, right, top и bottom)

1. Position relative — относительное позиционирование
2. Position absolute — абсолютное позиционирование в CSS
3. Связка position absolute и relative в Div верстке
4. Position fixed — привязка к области просмотра

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы поговорим о принципах позиционирования Html элементов с помощью CSS правил Position (со значениями absolute, relative и fixed) и свойств, задающих смещение left, right, top и bottom. Видите звездочку в левом нижнем углу? Дочитав статью до конца, вы узнаете как она туда попала.

В прошлой статье мы поговорили про одно из основополагающих CSS правил Float, которое помогает разорвать нормальный поток идущих друг за другом в Html коде тэгов. Оно позволяет осуществлять блочную Div верстку, на которой сейчас в основном и базируется сайтостроение. Но не Float единым…

Position relative — относительное позиционирование

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

У него имеется четыре возможных значения (static | relative | absolute | fixed). Откуда мы это можем узнать? Ну, конечно же, из спецификации, которая выложена на официальном сайте отца-основателя современной сети интернет Тима Бернерса-Ли:

По умолчанию используется значение position: static. Т.е. в нормальном потоке два CSS правила, способных его разорвать, имеют значения по умолчанию static и float:none. Как только одно из этих значений изменится — нормальный поток Html кода в этом месте будет нарушен, потому что теперь этот тег может совершенно по-другому взаимодействовать со своими соседями или вообще даже не взаимодействовать.

Давайте начнем рассмотрение с относительного позиционирования, которое будет соответствовать значению position: relative. После того, как мы пропишем его для какого-либо тэга, у нас появится возможность задавать смещение (осуществлять позиционирование) для этого элемента с помощью дополнительных правил Left, right, top и bottom (влево, вправо, вверх и вниз, соответственно):

По умолчанию для всех четырех используется значение Auto. Когда мы прописываем для какого-либо тега правило position: relative, то значения отступов со всех сторон сбрасываются в ноль и вам предоставляется возможность самим задать их.

Нужно понимать как задаются отступы. Например, left: 400px означает отступ от левой стороны вправо на соответствующую величину, а top: 100px — от верхней стороны вниз. Если укажите отрицательные значения Left, right, top и bottom, то элемент будет двигаться в противоположную сторону (например, top — наверх, а Left — влево).

Давайте рассмотрим использование relative для плавающего элемента. Пусть у нас имеются два Div контейнера, которые мы подкрасим для наглядности разным цветом фона с помощью background.

Первый контейнер мы изначально заставим плавать влево с помощью соответствующего свойства, а т.к. он будет пустой, то мы зададим ему высоту и ширину с помощью width и height (и отступы с помощью margin):

<div></div>
<div>text text ...</div>

В результате мы получим примерно такую картину маслом:

Первый контейнер, как и ожидалось, плавает влево. При этом сам по себе второй блок этого как бы и не замечает (ибо он блочный — display: block), но зато это замечает строчный элемент текста, который обтекает наш плавающий блок.

Теперь давайте добавим к CSS правилам для первого контейнера position: relative и зададим отступы слева и сверху с помощью Left и top:

<div></div>
<div>text text ...</div>

В результате мы увидим, что наш плавающий элемент сдвинулся в соответствии с заданными отступами:

Обратите внимание, что текст по-прежнему продолжает его обтекать так, как будто бы он все еще стоит на своем месте. Т.е. многие Html теги при своем построении считают, что он находится на своем законном месте (без учета заданных нами в правилах Left и top сдвигов).

Но так будут делать не все тэги, иначе бы мы не увидели никаких изменений. Ближайший предок с прокруткой (в нашем случае это будет тег Html, т.е. фактически область просмотра) эти изменения заметит.

Принцип действия relative не сложен, но не совсем понятно для чего это можно будет применить на практике. На самом деле это правило используется в связке с position absolute

Position absolute — абсолютное позиционирование в CSS

Давайте перейдем к рассмотрению абсолютного позиционирования. Проще всего будет начать рассмотрение этого CSS правила с показательного примера. Допустим, что у нас внутри Div контейнера находится строчный тег Span, для которого мы и зададим абсолютное позиционирование.

Но сначала посмотрим на эту конструкции еще без добавления «position: absolute». При этом для подчеркивания строчности Span добавим ему высоту, которая все равно не применится, а CSS код на сей раз добавим для разнообразия не через атрибут, а через тег style внутри конструкции Head:

<head>
<style type="text/css">
#abs{
	background:#FFC0C0;
	margin-left: 100px;
	}
#abs span{
	background:#C0FFC0;
	height:100px;
}
</style>
</head>
<body>
	<div>Первое <span>второе</span> и третье</div>
</body>

Для Div мы еще и отступ слева задали в 100px. Ну, а теперь посмотрим, что же изменится, если мы зададим нашему строчному тэгу Span абсолютное позиционирование путем добавления CSS правила position absolute:

#abs span{
	background:#C0FFC0;
	height:100px;
	position:absolute;
}>

Произошло странное. Судя по тому, что к Span применилось свойство height:100px — он перестал быть строчным тегом. Потом у нас, очевидно, состыковались друг с другом фрагменты «первое» и «третье», как будто бы элемента со словом «второе» между ними уже не существует. Именно так и работает абсолютное позиционирование в CSS.

Но давайте разберем все по пунктам при задании элементу свойства «position: absolute»

1. Тег, для которого прописывается это правило, становится блочным
2. Размеры этого блока будут определяться содержащимся в нем контентом (если вы не зададите их явно с помощью width и height).

3. Также как и для плавающих элементов (с прописанных Float), в случае применения к тегу «position: absolute», эффект Margin-colloapse для таких тэгов проявляться не будет. Т.е. ему никто не сможет передать свои вертикальные отступы и он никому передать их не сможет тоже (ни с кем не делится вертикальными отступами).

   Если вы вспомните предыдущую статью из рубрики «Справочника CSS», то увидите, что все эти три пункта наблюдались и при создании плавающих элементов с помощью Float.

   Поэтому, если для какого-либо тега уже было задано Float, но затем для него же прописали «position: absolute», то первое браузером (именно он отвечает за разбор кода) сбрасывается в None (значение по умолчанию), ибо нет смысла реализовывать две одинаковых модели.
4. Тег с прописанным «position: absolute» не взаимодействует ни с какими другими элементами Html кода кроме ближайшего родителя с прокруткой. Все остальные теги в коде элемент с абсолютным позиционированием просто-напросто не замечают (и это видно из нашего примера)

Это все хорошо, но ведь с помощью «absolute» мы должны осуществлять абсолютное позиционирование. Ну, собственно, это так и есть на самом деле. В купе с ним мы можем использовать все те же четыре CSS правила: Left, right, top и bottom. Как они будут работать при абсолютном позиционировании?

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

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

Контейнер при абсолютном позиционировании мы сможем назначать сами (им будет первый из предков, у которого значение position отличается от static, используемого по умолчанию).

Допустим, если мы задали только абсолютное позиционирование, но не прописали никаких значений для правил Left, right, top и bottom, то для них будет использоваться умолчательное значение Auto и такой элемент останется стоять на своем месте (как и у нас на последнем скриншоте). Тут должно быть все понятно.

В CSS используется структура предков и потомков, о которой я уже довольно подробно писал в статье про CSS селекторы псевдоклассов. Наша задача, при определении контейнера для тега с абсолютным позиционированием, будет заключаться в поиске предка с position, имеющим значение отличное от static (т.

В нашем примере ни одному из предков тега Span мы не прописывали position, поэтому дойдя до самого верха (тэга Html) мы на этом и остановимся. Давайте зададим нулевые отступы для рассмотренного чуть выше примера и убедимся в своей правоте:

#abs span{
	background:#C0FFC0;
	height:100px;
	position:absolute;
 left:0;
 top:0;
}>

В итоге абсолютно спозиционированный тег прижался к нулевой точке отсчета области просмотра. Но мы вольны сами выбирать контейнер для элемента с прописанным position absolute. Как же это можно сделать?

Связка position absolute и relative в Div верстке

Ну, а почему бы для этого не использовать CSS правило «position: relative». Пропишем его в нужном теге предка (который станет в итоге контейнером для абсолютно спозиционированного элемента), а значения Left, right, top или bottom прописывать не будет, тем самым, фактически, вообще не внеся никаких изменений в положение данного предка (он останется в нормальном потоке), но назначив его

Если мы пропишем «relative» для тега Body, то наша картинка чуть-чуть изменится:

<body>
	<div>Первое <span>второе</span> и третье</div>
</body>

Видите, появились характерные отступы говорящие о том, что теперь за точку отсчета берется левый верхний угол тэга Body. Помните, что в умолчательных значениях для этого тега прописаны отступы margin в 8 пикселей, которые мы и наблюдаем:

А теперь давайте в дополнение к уже проделанному пропишем «position: relative» и для контейнера Div, внутри которого и живет тег Span:

<style type="text/css">
#abs{
	background:#FFC0C0;
	margin-left: 100px;
	position: relative;
	}
#abs span{
	background:#C0FFC0;
	height:100px;
	position:absolute;
	left:0;
 top:0;
}
</style>
</head>
<body>
	<div>Первое <span>второе</span> и третье</div>
</body>

Как видим, картина поменялась. Несмотря на то, что relative прописано и для Body, и для Div, контейнером для абсолютно спозиционированного Span стал именно Div, т. к. он является первым предком, у которого значение position отлично от static.

Причем, если мы пропишем для нашего Div еще и border с padding, а также margin, то увидим, что в качестве контейнера при абсолютном позиционировании будет использоваться область контента с имеющимися внутренними отступами:

#abs{
	background:#FFC0C0;
	margin-left: 100px;
	position: relative;
	border:12px dotted #ccf;
	padding:20px;
	}

Как видно из примера, точка отсчета расположена в левом верхнем углу внутри рамки элемента (по внутренней ее границе). Отсюда следует правило, что для тэгов с «position: relative» (которые являются контейнерами при абсолютном позиционировании) рамку лучше будет вообще не использовать во избежании эксцессов.

Отступы (смещение) Left, right, top и bottom можно задавать не только в абсолютных единицах (читайте про размеры в CSS), но и в процентах, которые будут браться от ширины (left и right) и высоты (top и bottom) полученного контейнера. Т.е. «top:100%» будет соответствовать 100% высоты контейнера, а «left:100%» — 100% от его ширины.

И именно описанное выше взаимодействие я имел в виду, говоря про связку position absolute и relative. У нас благодаря этому появляется возможность самим выбирать контейнер или же, другими словами, точку отсчета при абсолютном позиционировании. Для чего же на практике используют эту связку?

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

Т.е. если вам нужно на странице сформировать появление и скрытие элемента, который при своем появлении не будет затрагивать все остальные теги (взаимодействовать с ними). В этом случае появление абсолютно спозиционированного блока не повлечет за собой дерганье и перестройку всей веб страницы.

Для выпадающего меню делают примерно следующее. При наведении курсора мыши (задается в CSS с помощью селектора псевдокласса hover) на корневой пункт меню появляется абсолютно спозиционилованный с помощью «absolute» элемент (вложенные пункты меню, созданные на основе обычного списка). Появляется этот выпадающий список рядом с корневым пунктом меню по той простой причине, что в нем прописан position: relative. Все.

Position fixed — привязка к области просмотра

Последним способом позиционирования является «position: fixed». Рассмотренные ранее способы были рассчитаны на размещение относительно каких-либо элементов Html кода. Но если мы начинаем прокручивать страницу, то и ее теги (даже имеющие абсолютное или относительное позиционирование) перемещаются вверх (или вниз).

А вот при использовании fixed такого уже происходить не будет. Спозиционирванный таким образом элемент всегда будет находиться в одном и том же положении в области просмотра, вне зависимости от прокрутки веб страницы. Вы, наверное, такие варианты уже встречали на сайтах. Например, на подобном эффекте построена работа довольно популярного плагина для WordPress под названием Simple Counters.

Для тэга с прописанным position:fixed контейнер никто не ищет, ибо им является сама область просмотра. Именно в этом заключается отличие от «absolute», а все остальное у них совпадает. Блоки с фиксированным размещением при прокрутке страницы ведут себя так, как будто это элементы интерфейса окна вашего браузера (они всегда под рукой).

Таким образом реализуются, например, панели инструментов, выпадающие панели с возможностью оставить отзыв и т.п. вещи. В качестве примера на этой странице я задал position: fixed для маленькой картинки в левом нижнем углу вашего экрана (области просмотра):

<img src="https://ktonanovenkogo.ru/wp-content/themes/Organic/images/list_star.png" />

На сегодня все, в следующей статье мы поговорим уже про CSS правило z-index, которое применимо только к уже спозиционированным элементам кода, т.е. для которых прописаны либо fixed, либо relative, либо absolute.

margin top, bottom, left, right

От автора: я пишу в новой книге главу «Блочная модель» и подошел к тому моменту, когда мне пришлось рассматривать отрицательные поля. К моему удивлению, я обнаружил, что нигде нет систематизированного описания отрицательных полей. Поэтому я должен был понять это для себя. Ниже мой первоначальный проект раздела «Отрицательные поля».

Последняя спецификация говорит только: «Отрицательные значения для свойств margin допускаются, но могут быть ограничения в конкретных реализациях». И на этом все. Не очень полезно. MDN также в основном молчит.

Это странно, особенно если учесть, что отрицательные поля — это очень старый функционал, который я, возможно, даже использовал в своем самом первом тесте CSS где-то в далеком 1998 году. (Если это был не position: relative, я уже не помню).

Но, во всяком случае, здесь, по-видимому, впервые в мире систематически рассматриваются отрицательные поля в простых ситуациях.

Отрицательные поля в CSS

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Вот наш тестовый элемент: простой контейнер с тремя абзацами. Обратите внимание, что абзацы имеют ширину 250 пикселей. Это очень важно.

Отрицательные margin-top и -bottom

Для начала давайте зададим для первого абзаца margin-bottom в -15px. По сути, когда браузер вычисляет точку, где должен начинаться второй абзац, он перемещает эту точку на 15 пикселей вверх. С этого момента браузер укладывает все абзацы как обычно.

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

Этот трюк полезен для тонких настроек, когда содержимое одного элемента должно слегка перекрывать содержимое другого над ним.

Теперь давайте зададим для второго абзаца margin-top в -15px. Как видите, это дает точно такой же эффект. Снова, второй абзац перемещается вверх на 15px, а последующие абзацы следуют нормально.

Сворачивание полей

Также обратите внимание, что при использовании отрицательных полей происходит сворачивание полей. Это, по крайней мере, указано в CSS 2.1:

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

В последнем примере первый абзац по-прежнему имеет поле по умолчанию 1em (Chrome; не могу найти значение Firefox).

Обычно браузер берет margin-bottom первого абзаца и margin-top второго, определяет, какое из них больше, и применяет это поле между этими двумя абзацами, что дает max(-15px,1em) = 1em. Хотя это не так.

В случае отрицательных полей мы берем абсолютные значения двух смежных полей (15 пикселей для второго абзаца; 1em для первого) и вычитаем меньшее (15 пикселей) из большего (1em). Это дает около 1px (в зависимости от размера шрифта, конечно).

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

Теперь мы полностью рассмотрели отрицательные значения margin-top и -bottom. Это иногда полезный эффект.

Отрицательные margin-left и -right

Отрицательные margin-left и -right работают аналогично, при условии, что элемент имеет ширину. Здесь мы применяем margin-left: -10px и margin-right: 10px.

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

Второй абзац с отрицательным краем справа остался без изменений. Отрицательное margin-right будет влиять на любой элемент справа от второго абзаца, но их нет.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Чтобы проиллюстрировать, как работает margin-right, давайте сместим абзацы, чтобы у них был сосед справа.

Теперь мы собираемся задать в абзацах некоторые отрицательные поля.

Как видите, второй абзац теперь выводится на 10 пикселей ближе к первому из-за отрицательного правого поля первого абзаца.

Также обратите внимание, что второй абзац имеет отрицательное значение margin-right, что означает, что он смещен на 10 пикселей вверх. Третий абзац имеет отрицательное значение margin-bottom, которое не дает никакого эффекта, поскольку у него нет нижнего соседа.

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

Если мы зададим для второго абзаца margin-left: -10px, произойдет то же самое. Так же, как с горизонтальными полями, левое и правое поля могут задавать пересечение элементов.

Пока что отрицательные поля слева и справа ведут себя точно так же, как поля сверху и снизу.

width: auto и отрицательное margin-right

Теперь давайте изменим поведение отрицательного margin-right, задав для абзацев width: auto. У них больше нет фиксированной ширины; вместо этого они полностью заполняют родительский элемент в соответствии с его отступами. Так работает width: auto.

Абзац с margin-left: -10px по-прежнему смещен на 10px влево, но его ширина увеличивается. Таким образом, его правый край не смещен, а остается там, где и был.

Отрицательное значение сейчас делает то же самое. Оно смещает правое поле абзаца на 10 пикселей вправо, а его левый край остается на своем месте, в результате чего ширина абзаца увеличивается. Это происходит только тогда, когда для элемента задано width: auto. Как мы видели ранее, элементы с фиксированной шириной ведут себя совершенно иначе.

Наконец, для третьего абзаца заданы оба горизонтальных поля. Его левое и правое поля смещены на 10px, по существу сводя на нет отступы контейнера в 10px.

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

Это стили заголовка; контейнер имеет отступы: 10px

h5 { margin-left: -10px; margin-right: -10px; padding-left: 10px; margin-top: 0; margin-bottom: 0; background-color: grey; color: white; /* no width, so defaults to width: auto */ }

Опять же, это возможно, только если заголовок имеет width: auto. К счастью, это так в 99% реальных случаев использования.

Так ведут себя отрицательные поля в простых ситуациях. Теперь, когда я описал базовое поведение, я могу рассмотреть, как они ведут себя во flexbox и grid.

Источник: //www.quirksmode.org

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

padding | htmlbook.ru

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

Версии CSS

Описание

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

Рис. 1. Поле слева от текста

Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.

Синтаксис

padding: [значение | проценты] {1, 4} | inherit

Значения

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины родителя элемента.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding</title>
  <style>
   .layer {
    background: #fc3; /* Цвет фона */
    border: 2px solid black;  /* Параметры рамки */
    padding: 20px; /* Поля вокруг текста */
   }
  </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.
  </div>
 </body>
</html>

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

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

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

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

Браузеры

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

сверху / снизу / слева / справа

Свойства верхний , нижний , левый и правый свойства используются с положением для установки размещения элемента. Они влияют только на позиционированные элементы, то есть элементы со свойством position , для которого установлено любое значение, кроме static . Например: относительный , абсолютный , фиксированный или липкий .

  div {
  <наверх || внизу || слева || справа>: <длина> || <процент> || авто || наследовать;
}  

Вы можете использовать его, например, чтобы переместить значок на место:

  кнопка.икона {
  положение: относительное;
  верх: 1px;
}  

Или поместите специальный элемент внутри контейнера.

  .container {
  положение: относительное;
}
.container header {
  позиция: абсолютная;
  верх: 0;
}  

Значение для вверху , внизу , слева и справа может быть любым из следующих:

• любая допустимая длина CSS
• процент от высоты содержащего элемента (для верхний и нижний ) или ширины (для слева и справа )
• авто
• наследовать

Элемент обычно будет двигаться от заданной стороны, если его значение положительное, и в сторону от него, если значение отрицательное.В приведенном ниже примере положительная длина для top перемещает элемент вниз (от верха), а отрицательная длина для top перемещает элемент вверх (вверх):

См. Верхнюю часть Pen
: положительные и отрицательные значения Мацуко Фридланда (@missmatsuko)
на CodePen.

Позиция

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

Свойство top не влияет на нерасположенные элементы (для элементов с позицией установлено значение static ). Так позиционируются элементы по умолчанию. Вы можете использовать position: static; как один из способов отменить влияние top на элемент.

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

См. Верхнюю часть Pen
: родственник Мацуко Фридланда (@missmatsuko)
на CodePen.

Когда top установлен для элемента с положением , установленным на absolute , элемент будет перемещаться вверх или вниз по отношению к его ближайшему позиционированному предку (или документу, если позиционированных предков нет).

В этой демонстрации розовый прямоугольник слева расположен на 50 пикселей вниз от верха страницы, потому что он не имеет позиционированных элементов-предков.Розовый прямоугольник справа расположен на 50 пикселей вниз от верхнего края своего родителя, потому что родительский элемент имеет позицию из относительно .

См. Pen
Top: absolute от Мацуко Фридланда (@missmatsuko)
на CodePen.

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

См. Верхнюю часть Pen
: исправлено с помощью CSS-Tricks (@ css-tricks)
на CodePen.

На первый взгляд может показаться, что нет разницы между absolute и fixed . Разницу можно увидеть, если сравнить их на странице, на которой достаточно содержимого для прокрутки. При прокрутке вниз всегда отображается элемент фиксированной позиции , а элемент абсолютной позиции прокручивается.

См. Pen
Scrolling: fixed vs. absolute с помощью CSS-Tricks (@ css-tricks)
на CodePen.

Когда top установлен для элемента с position , установленным на sticky , элемент будет перемещаться вверх или вниз по отношению к ближайшему предку с полем прокрутки (или окном просмотра, если у предка нет ползунка прокрутки) , ограниченный пределами содержащего его элемента.

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

См. Прокрутка Pen
: фиксированная или липкая с помощью CSS-Tricks (@ css-tricks)
на CodePen.

Попался

Установка противоположных сторон

Вы можете установить значение для каждого из верхних , нижних , слева и справа для одного элемента.Когда вы устанавливаете значения для противоположных сторон ( сверху и снизу или слева и справа ), результат может не всегда быть таким, как вы ожидаете.

В большинстве случаев нижний игнорируется, если верхний уже установлен, и правый игнорируется, если левый уже установлен. Если для направления установлено значение rtl (справа налево), слева игнорируется вместо справа . Чтобы каждое значение имело эффект, элемент должен иметь позицию , установленную на абсолютную или фиксированную и высоту , установленную на авто (по умолчанию).

В этом примере мы устанавливаем верхний , нижний , слева и справа на «20 пикселей», и ожидаем, что каждая сторона внутреннего блока будет на 20 пикселей от сторон внешнего блока:

См. Раздел «Настройка пера
» сверху, снизу, слева и справа от CSS-Tricks (@ css-tricks)
на CodePen.

Когда фиксировано, не относительно области просмотра

Элементы с позицией установлены на фиксированные не всегда располагаются относительно области просмотра.Он будет расположен относительно своего ближайшего предка с преобразованием , перспективой или , фильтром свойство, установленным на любое другое значение, кроме none , если таковое существует.

Добавление или удаление пространства

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

Когда элемент удаляется из потока документа, это означает, что пространство, которое он изначально занимал на странице, исчезает.Это тот случай, когда элемент позиционируется , абсолютное или фиксированное . В этом примере содержащий блок абсолютно позиционированного элемента свернулся, потому что абсолютно позиционированный элемент был удален из потока документа:

См. Поток документов Pen
Мацуко Фридланда (@missmatsuko)
на CodePen.

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

Вы можете взглянуть на него, но для свойства top нет кроссбраузерности.Используйте по желанию.

CSS Padding

Padding используется для создания пространства вокруг содержимого элемента внутри любых определенных границ.

Этот элемент имеет отступ 70 пикселей.

CSS Padding

Свойства CSS padding используются для создания пространства вокруг содержимое элемента внутри любых определенных границ.

С CSS у вас есть полный контроль над заполнением. Есть свойства для установки отступов для каждой стороны элемента (сверху, справа, снизу и слева).

Набивка — отдельные стороны

CSS имеет свойства для определения отступа для каждого сторона элемента:

• утеплитель
• обивка правая
• обивка нижняя
• отступ слева

Все свойства заполнения могут иметь следующие значения:

• длина — указывает отступ в пикселях, pt, см и т. Д.
• % — указывает заполнение в% от ширины содержащего элемента
• inherit — указывает, что заполнение должно быть унаследовано от родительского элемента

Примечание. Отрицательные значения не допускаются.

Пример

Установить разные отступы для всех четырех сторон элемента

 
заполнение: 1em;


набивка: 5% 10%;


заполнение: 1em 2em 2em;


отступ: 5px 1em 0 2em;


дополнение: наследовать;
заполнение: начальное;
заполнение: не установлено;
  

   
 У этого элемента умеренное заполнение. 
 
 
 В этом элементе огромные отступы! 
 
  

  h5 {
  цвет фона: салатовый;
  отступ: 20 пикселей 50 пикселей;
}

h4 {
  цвет фона: голубой;
  отступ: 110 пикселей, 50 пикселей, 50 пикселей, 110 пикселей;
}
  

  заполнение: 5%;

отступ: 10 пикселей;

отступ: 10 пикселей 20 пикселей;
                            

отступ: 10 пикселей 3% 20 пикселей;
                            
                            

отступ: 1em 3px 30px 5px;
                            
                            
                               

 
маржа: 1em;
маржа: -3px;


маржа: 5% авто;


маржа: 1em auto 2em;


маржа: 2px 1em 0 авто;


маржа: наследование;
маржа: начальная;
маржа: не задана;
  

  
 Этот элемент выровнен по центру.

 Этот элемент расположен за пределами своего контейнера. 
  

  .center {
  маржа: авто;
  фон: салатовый;
  ширина: 66%;
}

.за пределами {
  маржа: 3 бэр 0 0 -3 бэр;
  фон: голубой;
  ширина: 66%;
}  

  маржа: 5%;

маржа: 10 пикселей;

маржа: 1.6em 20px;
                            

маржа: 10px 3% -1em;
                            
                            

маржа: 10px 3px 30px 5px;
                            
                            
                            

маржа: 2em auto;
                            

маржа: авто;
                            
  

 .color-change {
 color: red; 
 цвет: оливковый; 
 цвет: желтый; 
 цвет: голубой; 
 цвет: зеленый; 
} 

.padding-inline {
 padding-left: 1rem; 
 обивка-правая: 1бэр; 
 внутренняя обивка: 1 бэр; 
} 
 

  .box {
  положение: относительное;
  граница: 2 пикселя сплошного зеленого цвета;
  ширина: 200 пикселей;
  положение: относительное;
  дисплей: встроенный блок;
}

.box> div {
  высота: 50 пикселей;
  ширина: 50 пикселей;
  фон: красный;
}  

  

   
 Я неподвижен 
 
  
 



   
 Я неподвижен 
 
  
 



   
 Я неподвижен 
 
  
 
  

  .box {
  положение: относительное;
  граница: 2 пикселя сплошного зеленого цвета;
  ширина: 200 пикселей;
  положение: относительное;
  дисплей: встроенный блок;
  вертикальное выравнивание: сверху;
}

.box> div {
  высота: 50 пикселей;
  ширина: 50 пикселей;
  фон: красный;
}  

  

  
 
   
 Я неподвижен 
 



  
 
   
 Я неподвижен 
 



  
 
   
 Я неподвижен