Css размещение блока справа

Позиционирование блоков в CSS

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

Основной поток документа

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

Элементы, которые подчиняются этим приавилам, находятся в основном потоке документа. Этот термин возник потому, что существуют элементы, которые размещаются на странице совсем по-другому. Для этого элементу должно быть установлено позиционирование. При этом, он удаляется из основного потока документа. Остальные элементы занимают его место, как будто его вообще нет. Иногда можно встретить информацию, что элементы, которым установлено свойство float , тоже удаляются из основного потока. Но это не совсем правильно, потому что строковые элементы не занимают их место.

Виды позиционирования

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

Существуют следующие виды позициционирования блоков:

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

Относительное позиционирование. Элемент смещается относительно того места, которое он занимал в основном потоке документа. Другие элементы не занимают его место. Оно остаётся пустым, если его не перекроют позиционированные элементы.

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

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

Позиционирование устанавливает свойство position . Оно принимает значения:

position: absolute; — абсолютное

position: relative; — относительное

position: fixed; — фиксированное

position: static; — статическое

Для указания координат используются свойства:

left — смещение левого края элемента относительно левой границы окна браузера или внешнего блока.

right — смещение правого края элемента относительно правой границы окна браузера или внешнего блока.

top — смещение верхнего края элемента относительно верхней границы окна браузера или внешнего блока.

bottom — смещение нижнего края элемента относительно нижней границы окна браузера или внешнего блока.

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

left: auto; — без смещения (по умолчанию)

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

left: inherit; — значение принимается от родительского элемента

У остальных свойств значения указываются так же, как у left .

Абсолютное позиционирование

Абсолютное позиционирование в CSS используется для того, чтобы разместить элемент в конкретном месте страницы. Прежде чем размещать позиционированные элементы, создадим страницу и добавим на неё два блока. Они будут находиться в основном потоке документа. Один из них будет с большой высотой. Это нужно для того, чтобы у страницы появилась прокрутка и Вы могли увидеть, как позиционированные элементы ведут себя при прокрутке. Кроме того вы поймёте, как элементы с разными видами позиционирования располагаются относительно основного потока. Для всех блоков на странице установим фон.

Источник

Выравнивание по правому краю | CSS

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

Свойство text-align наследуется, применяется к блочным элементам.
Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе right , позволяющих сдвигать содержимое вправо.

Свойство margin-left не наследуется, применяется ко всем элементам. У него есть значение auto , которое выравнивает блочный элемент по горизонтали. А именно margin-left: auto; прижимает элемент к правому краю родителя. Это положение может изменяться свойством margin-right . При margin-left: auto; и margin-right: auto; элемент размещается по центру ширины предка.

Свойство float не наследуется, применяется ко всем элементам. Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.

Свойство position не наследуется, применяется ко всем элементам. position: absolute; вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение position отлично от static , с помощью свойств top , right , bottom , left . При direction: ltr; свойство left имеет приоритет над свойством right , кроме случаев, когда свойство left имеет значение auto .

Свойство display не наследуется, применяется ко всем элементам. Элемент со значением table подобен тегу table , а table-cell — td . Также стоит обратить внимание на значение flex .

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

  
Свойство text-align наследуется, применяется к блочным элементам.   Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе right, позволяющих сдвигать содержимое вправо.

  
Свойство margin-left не наследуется, применяется ко всем элементам.  У него есть значение auto, которое выравнивает блочный элемент по горизонтали. А именно margin-left: auto; прижимает элемент к правому краю родителя. Это положение может изменяться свойством margin-right. При margin-left: auto; и margin-right: auto; элемент размещается по центру ширины предка.

  
Свойство float не наследуется, применяется ко всем элементам.  Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.

  
Свойство position не наследуется, применяется ко всем элементам.  position: absolute; вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение position отлично от static, с помощью свойств top, right, bottom, left. При direction: ltr; свойство left имеет приоритет над свойством right, кроме случаев, когда свойство left имеет значение auto.

  
Свойство display не наследуется, применяется ко всем элементам. Элемент со значением table подобен тегу table, а table-cell — td.
 
 
 

.center  margin: 0 auto; /* или */ margin-left: auto; margin-right: auto; > 

.right  margin: 0 0 0 auto; /* или */ margin-left: auto; > 

  class="wrapper">  class="content">i am a wrapper  class="inside">i am inside    

.wrapper  /* Отцентрируем блоки для экспериментов и зададим им ширину*/ margin: 100px auto; width: 300px; > .content  background-color: #38d9a9; height: 200px; position: relative; > .inside  /* абсолютное позиционирование */ position: absolute; /* прижимаем блок к правой границе относительно блока с position: relative*/ right: 0; /* Для примера можем прижать блок и к нижней границе */ bottom: 0; /* задаем ширину и цвет бэкграунда для наглядности*/ width: 75px; height: 75px; background-color: #444; >