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

Содержание

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

Обновлено 10 января 2021
  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. Как они будут работать при абсолютном позиционировании?

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

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

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

значение 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.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

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 */ }

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

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

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

Версии CSS

Описание

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

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

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

Синтаксис

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

Значения

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

Табл. 1. Зависимость от числа значений
Число значенийРезультат
1Поля будут установлены одновременно от каждого края элемента.
2Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого.
3Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4Поочередно устанавливается поля от верхнего, правого, нижнего и левого края.

Величину полей можно указывать в пикселах (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 - указывает, что заполнение должно быть унаследовано от родительского элемента

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

Пример

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

:

div {
padding-top: 50 пикселей;
отступ справа: 30 пикселей;
padding-bottom: 50 пикселей;
отступ слева: 80 пикселей;
}

Попробуй сам "

Padding - сокращенное свойство

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

Свойство padding является сокращенным свойством для следующего человека свойства обивки:

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

Итак, вот как это работает:

Если свойство padding имеет четыре значения:

  • отступы: 25 пикселей 50 пикселей 75 пикселей 100 пикселей;
    • верхний отступ 25px
    • правый отступ 50 пикселей
    • нижний отступ 75px
    • левый отступ - 100 пикселей

Пример

Используйте сокращенное свойство padding с четырьмя значениями:

div {
отступ: 25 пикселей, 50 пикселей, 75 пикселей, 100 пикселей;
}

Попробуй сам "

Если свойство padding имеет три значения:

  • отступы: 25 пикселей, 50 пикселей, 75 пикселей;
    • верхнее заполнение 25 пикселей
    • правый и левый отступы - 50 пикселей
    • нижний отступ 75px

Пример

Используйте сокращенное свойство padding с тремя значениями:

div {
отступ: 25 пикселей, 50 пикселей, 75 пикселей;
}

Попробуй сам "

Если свойство padding имеет два значения:

  • отступ: 25 пикселей 50 пикселей;
    • верхний и нижний отступы 25 пикселей
    • правый и левый отступы: 50 пикселей

Пример

Используйте сокращенное свойство padding с двумя значениями:

div {
отступ: 25 пикселей 50 пикселей;
}

Попробуй сам "

Если свойство padding имеет одно значение:

  • отступ: 25 пикселей;
    • все четыре отступа имеют размер 25 пикселей

Пример

Используйте сокращенное свойство padding с одним значением:

div {
отступ: 25 пикселей;
}

Попробуй сам "

Заполнение и ширина элемента

Свойство CSS width определяет ширину области содержимого элемента.В область содержимого - это часть внутри отступа, границы и поля элемента. (коробчатая модель).

Итак, если элемент имеет указанную ширину, отступ, добавленный к этому элементу, будет добавляется к общей ширине элемента. Часто это нежелательный результат.

Пример

Здесь элементу

задана ширина 300 пикселей. Однако фактическая ширина элемента
будет 350 пикселей (300 пикселей + 25 пикселей слева + 25 пикселей справа):

div {
ширина: 300 пикселей;
отступ: 25 пикселей;
}

Попробуй сам "

Чтобы сохранить ширину 300 пикселей, независимо от количества отступов, вы можете использовать box-sizing собственности.Это заставляет элемент сохранять свою ширину; если если увеличить отступ, доступное пространство для содержимого уменьшится.

Пример

Используйте свойство box-sizing, чтобы сохранить ширину 300 пикселей, независимо от количество набивки:

div {
width: 300px;
отступ: 25 пикселей;
box-sizing: border-box;
}

Попробуй сам "

Другие примеры

Установить левую обивку
В этом примере показано, как установить левое заполнение элемента

.

Установить правую обивку
В этом примере показано, как установить правильное заполнение элемента

.

Установить обивку верхнюю
В этом примере показано, как установить верхнее заполнение элемента

.

Установить нижнюю обивку
В этом примере показано, как установить нижнее заполнение элемента

.


Проверьте себя упражнениями!


Все свойства заполнения CSS

Имущество Описание
набивка Сокращенное свойство для установки всех свойств заполнения в одном объявлении
обивка нижняя Устанавливает нижнее заполнение элемента
обивка левая Устанавливает левое заполнение элемента
обивка правая Устанавливает правое заполнение элемента
утеплитель Устанавливает верхнее заполнение элемента


CSS Маржа


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


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

Попробуй сам "

Поля CSS

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

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


Маржа - отдельные стороны

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

  • по верхнему краю
  • поле справа
  • нижнее поле
  • поле слева

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

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

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

Пример

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

:

p {
margin-top: 100 пикселей;
нижнее поле: 100 пикселей;
поле справа: 150 пикселей;
маржа слева: 80 пикселей;
}

Попробуй сам "

Маржа - сокращенная собственность

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

Свойство поля является сокращенным свойством для следующих индивидуальных свойств поля:

  • по верхнему краю
  • поле справа
  • нижнее поле
  • поле слева

Итак, вот как это работает:

Если свойство margin имеет четыре значения:

  • поля: 25px 50px 75px 100px;
    • верхнее поле - 25 пикселей
    • правое поле - 50 пикселей
    • нижнее поле 75 пикселей
    • левое поле - 100 пикселей

Пример

Используйте сокращенное свойство поля с четырьмя значениями:

p {
margin: 25px 50px 75px 100px;
}

Попробуй сам "

Если свойство поля имеет три значения:

  • поля: 25px 50px 75px;
    • верхнее поле 25 пикселей
    • правое и левое поля 50 пикселей
    • нижнее поле - 75 пикселей

Пример

Используйте сокращенное свойство поля с тремя значениями:

п {
маржа: 25px 50px 75px;
}

Попробуй сам "

Если свойство margin имеет два значения:

  • поля: 25px 50px;
    • верхнее и нижнее поля 25 пикселей
    • правое и левое поля 50 пикселей

Пример

Используйте сокращенное свойство поля с двумя значениями:

п {
маржа: 25px 50px;
}

Попробуй сам "

Если свойство margin имеет одно значение:

  • поля: 25 пикселей;
    • все четыре поля 25 пикселей

Пример

Используйте сокращенное свойство поля с одним значением:

p {
маржа: 25 пикселей;
}

Попробуй сам "

Авто Значение

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

После этого элемент займет указанную ширину, а оставшееся пространство будут поровну разделены между левым и правым полями.

Пример

Использовать маржу: авто:

div {
width: 300px;
маржа: авто;
граница: сплошной красный 1px;
}

Попробуй сам "

Наследственное значение

В этом примере левое поле элемента

может быть унаследовано от родительского элемента. (

):

Пример

Использование наследуемого значения:

div {
граница: 1 пиксель сплошной красный;
margin-left: 100 пикселей;
}

стр.ex1 {
маржа слева: наследовать;
}

Попробуй сам "

padding - CSS: каскадные таблицы стилей

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

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

Примечание. Padding создает дополнительное пространство внутри элемента. Напротив, поле создает дополнительное пространство вокруг элемента .

Это свойство является сокращением для следующих свойств CSS:

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


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


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


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


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

Свойство padding может быть указано с использованием одного, двух, трех или четырех значений. Каждое значение - <длина> или <процент> . Отрицательные значения недопустимы.

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

Значения

<длина>
Размер заполнения как фиксированное значение.
<процент>
Размер заполнения в процентах относительно ширины содержащего блока.

Настройка заполнения пикселями

HTML
  
У этого элемента умеренное заполнение.

В этом элементе огромные отступы!

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

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

Настройка заполнения пикселями и процентами

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

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

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

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

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

Таблицы BCD загружаются только в браузере

Поля

- CSS: каскадные таблицы стилей

Свойство margin Сокращенное свойство CSS устанавливает область полей на всех четырех сторонах элемента.

Это свойство является сокращением для следующих свойств CSS:

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


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


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


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


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

Свойство поля может быть указано с использованием одного, двух, трех или четырех значений. Каждое значение представляет собой <длина> , <процент> или ключевое слово auto . Отрицательные значения приближают элемент к его соседям, чем это было бы по умолчанию.

  • Когда указано одно значение , применяется одно и то же поле для всех четырех сторон .
  • Когда указаны два значения , первое поле применяется к верхнему и нижнему , второе - к левому и правому .
  • Когда указаны три значения , первое поле применяется к верхнему , второе к правому и левому , третье к нижнему .
  • Если указано четыре значения , поля применяются к верхнему , правому , нижнему и левому в указанном порядке (по часовой стрелке).

Значения

<длина>
Размер поля как фиксированное значение.
<процент>
Размер поля в процентах относительно ширины содержащего блока.
авто
Браузер выбирает подходящее поле для использования. Например, в некоторых случаях это значение можно использовать для центрирования элемента.

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

Верхнее и нижнее поля не влияют на незамещенных встроенных элемента, таких как или .

Горизонтальное центрирование

Чтобы центрировать что-либо по горизонтали в современных браузерах, вы можете использовать display : flex; justify-content : по центру; .

Однако в старых браузерах, таких как IE8-9, которые не поддерживают гибкую компоновку ящиков, они недоступны. Чтобы центрировать элемент внутри его родителя, используйте margin: 0 auto; .

Свертывание поля

Верхнее и нижнее поля элементов иногда сжимаются в одно поле, равное большему из двух полей. Дополнительные сведения см. В разделе «Освоение свертывания поля».

Простой пример

HTML
  
Этот элемент выровнен по центру.
Этот элемент расположен за пределами своего контейнера.
CSS
  .center {
  маржа: авто;
  фон: салатовый;
  ширина: 66%;
}

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

Другие примеры

  маржа: 5%;

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

маржа: 1.6em 20px;
                            

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

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

маржа: 2em auto;
                            

маржа: авто;
                            
  

Таблицы BCD загружаются только в браузере

Прекратите использовать Left, Right, Top и Bottom в CSS | Джастин Трэвис Уэйт-Мэйр

Фото Панкаджа Пателя на Unsplash

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

Этот урок был усвоен ко времени разработки Flex-box и CSS Grid, поэтому они не страдают от тех же проблем, но как насчет этих исходных значений свойств? К счастью для нас, рабочая группа CSS пересмотрела эти исходные значения свойств и добавила (не заменила) то, что теперь называется логическими свойствами CSS.По этой причине нам всем нужно перестать использовать исходные значения свойств и вместо этого использовать эти новые логические свойства, чтобы мы могли создавать более гибкие макеты, которые могут удовлетворить потребности всех наших аудиторий, независимо от языка, используемого на их компьютере.

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

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

Теперь, когда мы понимаем направления блочного и встроенного потока, теперь мы можем понять эти новые имена свойств.Начнем с - слева объекта. К ним относятся такие свойства, как margin-left и border-left. В контексте нормального потока для английского языка слева является начало внутреннего направления потока. Поэтому везде, где мы обычно использовали бы -left , теперь мы должны начать использовать вместо него -inline-start it. Например, теперь следует использовать margin-inline-start и border-inline-start . Свойства -right также легко перевести, потому что правая часть - это конец встроенного потока.Поэтому мы можем заменить -right на -inline-end, , например margin-inline-end и border-inline-end

Остальные свойства теперь довольно легко определить. Верх и низ - начало и конец направления потока блока. Это означает, что везде, где мы использовали -top или -bottom , теперь мы можем заменить их свойствами -block-start и -block-end соответственно. Например, margin-block-start и border-block-end.

Многие другие свойства были обновлены для использования этих логических имен, и вы можете найти их полный список на MDN. Есть еще два свойства, о которых я считаю важным упомянуть здесь, поскольку они могут повлиять на наши повседневные макеты. Обычно мы устанавливаем высоту и ширину элемента с помощью CSS, но, опять же, эти значения относятся к англоязычному миру. Какой должна быть ширина или высота нашего элемента, если язык вертикальный, например японский?

По этой причине width и height следует заменить на inline-size и block-size соответственно.Сюда также входят все свойства с префиксом max- и min- . Вы можете установить max-block-size и min-inline-size вместо max-height и min-width

В случае чего-либо нового один из первых вопросов, который задает каждый разработчик: « На что похожа поддержка браузера? » Есть хорошие новости и есть плохие новости. Хорошей новостью является то, что все современные вечнозеленые браузеры, такие как Chrome / Edge, Firefox и Safari, поддерживают логические свойства CSS.Плохая новость в том, что IE11, который все еще используется, не работает.

Итак, что нам делать, если нам нужно поддерживать IE11? В предыдущем посте о CSS Grid я говорил о том, что поддержка платформы не означает, что она должна быть одинаковой, и что люди, использующие старые технологии, ожидают меньшего опыта.

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

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

Цвет текста вышеупомянутого класса будет зеленым, поскольку он был установлен последним.

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

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

внутренняя обивка: 1 бэр;
}

Что произойдет, так это то, что для браузеров, поддерживающих новые логические свойства CSS, мы записали эти значения последними, чтобы они победили. В противном случае наш класс автоматически вернется к традиционным padding-left и padding-right , поскольку они были установлены первыми, а новое имя свойства будет проигнорировано как недопустимый CSS.

Кстати, надеюсь, вы заметили одну из действительно интересных особенностей новых имен логических свойств.Если вы хотите установить оба встроенных значения или оба значения блока одновременно, вы можете использовать -inline или -block без суффикса -start или -end , и он установит оба сразу. Это намного лучше, чем использование метода ярлыка с двумя значениями margin: 0 auto , поскольку это иногда вызывает непредвиденные побочные эффекты, явно устанавливая маржу на ноль, просто чтобы установить левое и правое поля на auto. Вы можете переписать приведенное выше так: margin-inline: auto

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

css - Есть ли разница между свойствами «margin-top, -left, -bottom, -right» и «top, left, bottom, right», когда элемент расположен абсолютно?

Да, есть разница, связанная со статическим положением . Вот простой пример для иллюстрации:

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

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

Я неподвижен

Я неподвижен

Я неподвижен

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

Из спецификации:

Для целей этого и следующего разделов термин «статическое положение» (элемента) относится, грубо, к положению , которое элемент занимал бы в нормальном потоке . Точнее, статическая позиция для 'top' - это расстояние от верхнего края содержащего блока до края верхнего поля гипотетического блока, который был бы первым блоком элемента, если бы его указанное значение 'position' было ' static 'и его указанное' float 'было' none ', а его указанное' clear 'было' none '...

Тогда имеем:

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

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = высота содержащего блока

Далее будет первый случай:

Если все три из «top», «height» и «bottom» являются автоматическими, установите «top» в статическое положение и примените правило номер три ниже.

А за этим последует второй:

'bottom' - 'auto', 'top' и 'height' не 'auto', затем установите значения 'auto' для 'margin-top' и 'margin-bottom' равными 0 и решите для 'bottom'

Оба будут вести себя одинаково, если статическое положение будет таким же при установке top: 0 . В основном, когда элемент является первым в содержащем его блоке

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

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

Я неподвижен

Я неподвижен

Я неподвижен

Стоит отметить, что вы можете комбинировать их оба.

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

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