Position absolute css по центру: Как выровнять css position absolute по центру

position

Давайте попробуем разобраться с таким свойством, которое называется «position» или «абсолютное позиционирование».

Давайте на страницу добавим какой-нибудь box, в который вложим еще один box.

<div>
  <div>
  </div>
</div>

.box{
  width:200px;
  height:200px;
  background: #444;
  margin: 20px;
  padding:1px;
}
.box_1{
  width:200px;
  height:200px;
  background: #aaa;
  margin: 20px;
}

Получаем вот такую картинку: 

Соответственно, что происходит? У каждого блока есть какой-то родитель, и этот блок будет позиционироваться относительно своего родителя. То есть в данном случае для первого бокса родитель – это «body» или сам сайт, то есть он позиционируется относительно него. Для «box_1» родителем будет «box», соответственно, он будет относительно него перемещаться на 20px. Но мы можем сделать так, чтобы «box_1» жил независимо от «box’а» и он мог находиться где хочет и как хочет.

Для это мы задаём для «box_1» свойство «position: absolute».

.box_1{
  position: absolute;
  width:200px;
  height:200px;
  background: #aaa;
  margin: 20px;
  left: 10px;
  top: 20px;
}

И теперь, когда мы задали «position: absolute», у нас начинает действовать свойства «left», «top», «right», «bottom». Допустим, мы сделаем «left» 10px, «top» 20px, и блок встанет вот так:

Мы сделаем, давайте, «top» 5px, и блок встанет так:

Как видите, ему теперь без разницы есть «box», нет «box’а», потому что он позиционируется относительно «body». Мы можем даже поставить «bottom», и блок будет стоять снизу страницы. Поставим «right» ему, и тогда он будет справа. Если мы будем изменять размеры экрана, то этот бокс будет прижиматься к краю экрана и будет находится там, где бует находится угол нашего экрана.

Вот так работает «position: absolute».

В чём преимущество? В том, что мы теперь можем позиционировать как угодно наш блок по высоте, по ширине и т. д. Допустим, вы можете указать следующее: написать такую фишечку – «left: calc(50% — 100px)». Тогда блок встанет ровно по центру по ширине. Или написать точно такое же свойство для «top», тогда блок встанет ровно по высоте, то есть до этого он становился по ширине, а теперь по высоте.

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

Поехали разбираться в свойствах дальше, в нюансах. Теперь давайте сделаем «box» родителем для «box_1». Для этого для «box’а» мы задаём «position: relative». И происходит следующее:

То есть какая фишечка. Если элемент абсолютно спозиционирован и у него «position: absolute», то он будет позиционироваться относительно ближайшего родительского блока, у которого есть какое-то значение «position» — либо «absolute», либо «relative».

Чем отличаются «absolute» и «relative»? Тем, что «absolute» позиционируется абсолютно, а «relative» работает точно так же, как и работал, как обычный блок, но теперь он может являться родителем для абсолютно позиционированных элементов. То есть если «position: relative» не стоит, то этот блок позиционируется относительно «body».

Так же есть ещё один тип свойства «position». Давайте сделаем какой-то блок и зададим ему «position: fixed», зададим какой-то размер и спозиционируем сверху 50px и слева 100px. И поставим блок, который создаст на странице скролл.

Вот, мы скроллим страницу, как видите, скролл отрабатывается, но блок остаётся на месте, то есть «position: fixed» фиксирует наш блок по центру, то есть там, где укажем, и скролл на этот блок влиять не будет.

Это свойство вы можете использовать, допустим, для создания всплывающих каких-то окошек. То есть вы делаете вот так вот:

.block{
  position: fixed;
  width:100%;
  height:100%;
  left: 0px;
  top: 0px;
  background: #444;
}

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

CSS Position: примеры

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

Специфика построения потока документа

Position CSS работает с потоком веб-страницы. Как это понять? По умолчанию все элементы страницы располагаются в том порядке, в котором вы создали их в html-разметке. Если тег header расположен над тегом footer, то и на странице он будет отображаться выше. И наоборот, если вы почему-то решите разместить footer в html над «хедером», «подвал» страницы будет отображаться над «шапкой». При этом блочные элементы занимают всю доступную для них ширину. Строчные, в свою очередь, располагаются в одну строку, пока не займут ее всю, а потом начнут переноситься на новую. Этот порядок именуется «потоком документа».

Для изменения поведения потока используется свойство Position в CSS. Также он может меняться из-за свойства float, но его мы рассматривать не будем. С помощью позиционирования можно заставить элемент «выпасть» из обычного потока, после чего он начнет вести себя по-новому. Как именно – зависит от использованного значения свойства.

CSS Position: static

Position: static, или статическое позиционирование, является значением по умолчанию для всех блоков html, которые вы создали. В обычных условиях вам не придется иметь с ним дело. Если для какого-нибудь блока или строки не задано вообще никакого позиционирования, значит, оно имеет значение static. На странице такой компонент отображается в соответствии с потоком. Если указать ему свойства right/left или top/bottom, никакого эффекта не будет.

CSS Position: fixed

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

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

CSS Position: relative

Использование этого свойства называется относительным позиционированием. Если задать элементу свойство Position: relative, тот останется на своем месте. На первый взгляд, ничего особенного не произойдет, но все измениться, если дополнительно использовать свойства right/left и top/bottom. С их помощью можно управлять перемещением компонента относительно его местоположения. На том месте, где блок или строка были раньше, окажется пустое пространство – другие элементы останутся на своих положениях, не обращая внимания на освободившееся место.

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

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

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

Во-первых, положением элемента можно свободно управлять – для этого используются свойства top/right/bottom/left. Например, если вы зададите значение bottom: 100px, блок «оттолкнется» от нижней част страницы на 100 пикселей. Во-вторых, при скроллинге «абсолютный» компонент останется на своем месте, вместо того, чтобы перемещаться со страницей.

Взаимодействие абсолютных блоков с родительскими элементами

Можно добиться еще более точного контроля над абсолютно позиционированным компонентом. Для этого нужно задать его родителю свойство Position: fixed, relative или absolute.

Рассмотрим пример. У вас есть div с классом relative-div, внутри которого размещается div с классом absolute-div. Задаем внутреннему блоку свойство Position: absolute. Тот сразу же «вылетает» из потока и оказывается где-то вверху, ведь теперь его расположение просчитывается относительно окна браузера. Теперь задаем блоку с классом relative-div свойство Position: relative и «блудный сын» возвращается на место. Почти. На самом деле, он оказывается в верхнем левом углу родительского элемента.

Почему так происходит? Дело в специфике свойства Position: absolute. По умолчанию его положение зависит от окна браузера, но если «родитель» тоже позиционирован как-то кроме static, позиция начинает зависеть от родительского элемента. Это очень удобно, потому что можно разместить компонент в любом месте, не просчитывая огромные цифры относительно окна браузера. Прием часто используется для размещения иконок, кнопок и других небольших элементов.

Position CSS по центру

Одна из главных трудностей новичков состоит в том, чтобы центрировать элемент вертикально и горизонтально. Грамотно используя свойство Position, сделать это проще простого. CSS Position: absolute по центру устанавливается следующим образом. Допустим, у вас есть div с классом absolute-div, который находится в «диве» с классом relative-div. «Родитель» позиционирован относительно и его ширина равна ширине всей страницы. «Потомок» имеет ширину и высоту 400 px, абсолютное позиционирование и по умолчанию располагается в верхнем левом углу родительского элемента.

Все, что нужно сделать – это задать абсолютному компоненту top: 50 % и left: 50 %. Почти готово! Absolute-div сдвинулся с места и оказался почти в центре, но не совсем. Середины «родителя» касаются его края, а нам нужно, чтобы в центре блока оказался центр «потомка». Для этого нужно задать ему margin-left и margin-right со значениями -200 px. Тем самым мы сместим абсолютно позиционированный блок на половину его высоты и ширины. Все, он в центре!

Перекрывание компонентов

Проблемой может стать непростое, на первый взгляд, «наложение» позиционированных элементов на их «соседей». Например, компонент с Position: fixed будет перекрывать все, что расположено на странице. Исправить ситуацию можно с помощью свойства z-index, однако помните, что оно работает только для позиционированных элементов. Соответственно, если вы хотите размещать блок поверх фиксировано позиционированного элемента, этому блоку придется также задать позиционирование. Например, относительное.

Лучший способ освоить позиционирование – рассматривать примеры Position CSS, экспериментировать и пробовать что-то свое. Постарайтесь научиться использовать его в сочетании с функцией calc() – это даст возможность более гибко настраивать расположение. Однако помните, что это свойство не предназначено для выстраивания всей «сетки» страницы. С его помощью нужно перемещать относительно небольшие элементы, иначе можно слишком легко запутаться.

html — CSS: центрирование текста с абсолютным позиционированием внутри относительного родителя

спросил 9 лет, 4 месяца назад

Изменено 3 года, 6 месяцев назад

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

Как я могу центрировать текст с абсолютным позиционированием внутри относительного родительского элемента? Я пытаюсь использовать text-align:center для родительских элементов, но он всегда центрирует левый угол дочернего элемента, а не сам элемент.

http://jsfiddle.net/sucTG/2/

• html
• css
• css-позиция
• центрирование

3

Дело в том, что position:absolute; изменяет ширину элемента в соответствии с его содержимым, а text-align: center; центрирует текст в пределах ширины блока элемента. Итак, если вы добавите позиция: абсолютная; не забудьте увеличить ширину элемента, иначе text-align: center; Свойство будет бесполезным.

Лучший способ решить эту проблему — добавить width: 100%; и слева: 0px; в разделе .text.

http://jsfiddle.net/27van/

1

Теперь вы можете добиться желаемого более элегантно с помощью flex. См. например:

HTML:

 <дел>
  
Ваш текст