Right left top bottom: top, left, bottom, right — учебник CSS

top, left, bottom, right — учебник CSS

Как вы знаете, в браузере есть область просмотра — это та его часть, в которой отображается веб-страница. У данной области есть четыре стороны — верхняя, левая, нижняя и правая. И в CSS для каждой из этих сторон существует соответствующее свойство: top, left, bottom и right.

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

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

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

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

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

Кратко рассмотрим каждое свойство:

• top — задает расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Если значение положительное, позиционируемый элемент смещается вниз относительно его точки отсчета. При отрицательном значении элемент смещается вверх.
• left — задает расстояние от левого края родительского элемента до левого края дочернего элемента. Если значение положительное, позиционируемый элемент смещается вправо относительно его точки отсчета. При отрицательном значении элемент смещается влево.
• bottom — задает расстояние от нижнего края родительского элемента до нижнего края дочернего элемента. Если значение положительное, позиционируемый элемент смещается вверх относительно его точки отсчета. При отрицательном значении элемент смещается вниз.
• right — задает расстояние от правого края родительского элемента до правого края дочернего элемента. Если значение положительное, позиционируемый элемент смещается влево относительно его точки отсчета. При отрицательном значении элемент смещается вправо.

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

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

Далее в учебнике: свойство z-index — расположение позиционированных элементов по оси Z.

Изменяем свойствами left, top, right и bottom положение элемента — Позиционирование — codebra

Введение

Сместить элемент по условным осям координат можно при помощи свойств left, top, right и bottom. Для их использования, необходимо, чтобы элемент был позиционированным, т.е. значение свойства position для него было отлично от static. Что делают эти свойства:

• left – отображает расстояние, на которое будет смещен элемент от левого края, в сторону правого.
• top – отображает расстояние, на которое будет смещен элемент от верхнего края, в сторону нижнего.
• right – отображает расстояние, на которое будет смещен элемент от правого края, в сторону левого.
• bottom – отображает расстояние, на которое будет смещен элемент от нижнего края, в сторону верхнего.

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

Код CSS

left: размер | проценты | auto
top: размер | проценты | auto
right: размер | проценты | auto
bottom: размер | проценты | auto    

Размер может быть задан в любых единицах измерения, разрешенных в CSS. Теперь рассмотрим, как влияет значение, заданное в свойстве position.

Если для элемента свойство position задано как absolute

В данном случае родительским элементом является окно браузера, т.е. отсчет начинается от его краев. Если для свойства top задать 10%, то элемент сместится на 10% вниз от окна браузера.

Если для элемента свойство position задано как relative

В таком случае элемент будет смещаться относительно своего исходного положения. Если для свойства

Если для элемента свойство position задано как absolute, а для родителя – relative

Теперь элемент будет изменять свое положение относительно родительского блока.

Руководство CSS Position

CSS Position используется для настройки «как элемент будет расположен на документе». Имеется 5 разных методов для расположения элемента на документе:

1. {position: static} (Default)
2. {position: relative}
3. {position: fixed}
4. {position: absolute}
5. {position: sticky}

После того как элемент был расположен 1-им из 5-ти способов выше, только тогда свойства (property) top, right, bottom, right будут использованы.

2- CSS {position: static}

Элементы в HTML позиционированы статически (Positioned static) по умолчанию, это значит его позиция определяется по обычному правилу документа (document). На него не влияют 

position-static-example.html

<div>
  This div element has {position: static};
</div>

<br>

<h4>CSS {position:static; left: 50px;}</h4>

<div>
  This div element has {position: static} and {left: 50px}
</div>

3- CSS {position: relative}

Элемент позиционируется с помощью CSS {postion: relative}, значит он позиционирован относительно (positioned relative) по сравнению с его обычной позицией (статическая позиция). Или другими словами, вы можете использовать свойство ​​​​​​​ CSS property (left, right, top, bottom) для регулировки (перемещения) левой, правой, верхней, нижней позиции по сравнению с его обычной позицией.

position-relative-example.html

<h4>{position: relative;}</h4>

<div>
   position: relative; width:250px;
</div>
<br>

<h4>{position: relative; left:50px; top:50px;}</h4>

<div>
  position: relative; width:250px; <br/>
  left:50px; top:50px;
</div>

Иллюстрация элемента имеющего перемещенный {position:relative}​​​​​​​, по сравнению с его статической позицией из-за влияния CSS property: {left, top, bottom, right}.

Примечание: Для элемента с относительной позицией, CSS property: {top, right, bottom, left} переместят позицию элемента относительно его статической позиции (естественная позиция), но не изменит размер элемента. CSS left является более приоритетным по сравнению с CSS right. И CSS top является более приоритетным по сравнению с ​​​​​​​CSS bottom.

position-relative-example2.html

<h4>{position: relative;}</h4>

<div>
   position: relative;
</div>
<br>

<h4>{position: relative; left: 50px; right: 50px;}</h4>

<div>
  position: relative; <br/>
  left: 50px; right: 50px;
</div>

Элемент позиционируется с помощью CSS {position:fixed}, значит он будет относительно позиционирован (positioned relative) по сравнению с Viewport браузера.

Например, используйте CSS {position:fixed} чтобы зафиксировать позицию элемента по отношению ко дну (bottom) и правой стороне (right) у Viewport:

position-fixed-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS Position</title>
      <style>
         div {
           background-color:yellow;
           padding: 5px;
         }
      </style>
   </head>
   <body>
       <h3>{position: fixed}</h3>

       <div>
           position:fixed; bottom:20px; right:15px;
       </div>

      <p>Content .. 1</p>
      <p>Content .. 2</p>
      <p>Content .. 3</p>
      <p>Content .. 4</p>
      <p>Content .. 5</p>

   </body>
</html>

Особенностью элемента с CSS {position: fixed} является то, что вы можете прикрепить (anchor) его 4 стороны к 4-м сторонам Viewport браузера. В этом случае, если размер​​​​​​​ Viewport изменится, размер этого элемента также изменится. Это как в изображении нииже:

position-fixed-example2.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>CSS Position</title>

      <style>
         div {
           background-color: LightGray;
           padding: 5px;
         }
      </style>

   </head>
   <body>
       <h3>CSS {position: fixed}</h3>

       <div>
           position: fixed; <br>
           bottom:40px;right:35px;top: 100px;left:150px;
       </div>

      <p>Content .. 1</p>
      <p>Content .. 2</p>
      <p>Content .. 3</p>
      <p>Content .. 4</p>
      <p>Content .. 5</p>
   </body>
</html>

5- CSS {position: absolute}

Элемент с абсолютным позиционированием (positioned absolute) будет искать элемент ближайшего предка (родительский, прародительский,..), который имеет​​​​​​​ CSS {position: relative}. После нахождения он настроит позицию относительно этого элемента. Если не найден, он установит позицию относительно ​​​​​​​Viewport браузера.

position-absolute-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS Position</title>
   </head>
   <body>
     <h3>CSS {position:absolute}</h3>

     <div>
         I am a div {position:relative} (red).

         <div>
              I am a normal div (green).

              <div>
                 position: absolute; bottom:10px; right:15px;
              </div>
         </div>
     </div>
   </body>
</html>

position-absolute-example2.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Bootstrap Position</title>
   </head>
   <body>
       <h3>CSS {position:absolute}</h3>

       <div>
          I am a div {position:relative} (red).

          <div>
             position: absolute; <br/>
             bottom:40px; right:35px; <br/>
             top:100px; left:150px; <br/>
             background:yellow;
          </div>
       </div>
   </body>
</html>

6- CSS {position: sticky}

Элемент позиционируется с помощью CSS {position: sticky}, его позиция будет основана на позиции прокрутки пользователя. (scoll position).

Элемент с CSS {position:sticky} будет сменен с «relative» на «fixed» или наоборот зависеть от позиции прокрутки пользователя.

Примечание: Браузер IE/Edge версии 15 или более ранней версии не поддерживает ​​​​​​CSS {position: sticky}.

position-sticky-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS Position</title>
   </head>
   <body>
       <h3>CSS {position:sticky}</h3>

       <hr>
       <b>Try to scroll inside this frame to understand how sticky positioning works.</b>
       <p>
          Note: IE/Edge 15 and earlier versions do not support sticky position.
          I am sticky!
       </p>

       <div>
          position:sticky; top:5px;
       </div>

       <p>
          Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,
          altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
          Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
       </p>

       <p>
          Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,
          altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
          Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
       </p>

       <p>
          Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,
          altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
          Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
       </p>
   </body>
</html>

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 с нуля

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

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

А само понятие контейнера для абсолютно спозиционированных элементов будет отличаться от общепринятого. Из предыдущих статей вы, наверное, помните, что контейнером для тега 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.

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

Свойства верхний , нижний , левый и правый свойства используются с положением для установки размещения элемента. Они влияют только на позиционированные элементы, то есть элементы со свойством 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.

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

См. Верхнюю часть 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;
маржа: -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;
                            

маржа: авто;
                            
  

 
отступ: 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;
                            
                            
                               

  
<заголовок>




    

        
  
        

                
 музыкальная грива: xxxxxxxx 
                
 автор: гггггггг 
                
 публикация № 20081001 
                
 язык ： английский 
          
     
 

  

  внизу: 50 пикселей;
    слева: 50 пикселей;
    вправо: 50 пикселей;
    верх: 50 пикселей
  

  bottom: 0px;
    слева: 0px;
    вправо: 0 пикселей;
    верх: 0px
  

  
<заголовок>




    

        
  
        

                
 музыкальная грива: xxxxxxxx 
                
 автор: гггггггг 
                
 публикация № 20081001 
                
 язык ： английский 
          
     


  

  div.block {
ширина: 400 пикселей;
высота: 121 пикс;
граница: сплошной красный 1px;
позиция: абсолютная;
верх: 0px;
слева: 0px
маржа: авто;
}
  

  div.block {
ширина: 400 пикселей;
высота: 121 пикс;
граница: сплошной красный 1px;
позиция: абсолютная;
верх: 0px;
слева: 0px;
вправо: 0 пикселей;
внизу: 0px;
маржа: авто;
}