Position fixed по центру css: Как с помощью position fixed расположить элемент точно по центру? — Хабр Q&A

css3 — css position: fixed — задать центр потомка по центру родителя адаптивно

Есть кнопка на сайте, которая всегда должна быть на виду. Она смещается при прокрутке (скриптом js подставляется новый класс при прокрутке).

Проблема в том, что я никак не могу ее адаптивно центрировать ОТНОСИТЕЛЬНО РОДИТЕЛЯ после этого смещения. Задаю стили для добавляемого при прокрутке класса:

.scrolled {
  position: fixed;
  top: 0;
  left: 50%;
}

и получаю смещение относительно левого края элемента. А нужно сместить элемент относительно его центра.

Элемент — кнопка шириной 186 px. Соответственно, нужно его как-то позиционировать влево на (50% ширины окна браузера — 93 px;). Других решений пока не вижу.

Можно ли это сделать средствами css?

Пробовала transform, но это свойство не работает для position: fixed;

В общем, «сами мы не местные, помогите, чем можете» 🙁 Спасибо!

• css3
• адаптивная-верстка
• центрирование

Делаем контейнер на всю ширину экрана и позиционируем внизу, а все элементы внутри выравниваем по центру.

Способ 1: с помощью text-align:center

Способ 2: с помощью flex-box

#fixed {
  position: fixed;
  top: 0;
  left:0;
  right:0;
  display: block;
  text-align: center;
  background: #ddd;
  z-index: 9999;
}

<div>
    <a href="">ПО ЦЕНТРУ</a> 
</div>

#fixed {
  position: fixed;
  top: 0;
  left:0;
  right:0;
  display: flex;
  justify-content: center;
  background: #ddd;
  z-index: 9999;
}

<div>
    <a href="">ПО ЦЕНТРУ</a> 
</div>

UPD: согласно вашей задачи. Чтобы данный код сработал, нужно чтобы была указана ширина родительского блока.

.container{
  display:flex;
}

#contant{
  width:200px;
}
#menu{
  background:#ddd;
}
#menu a{
  display:block;
  width:100px;
}

#fixed{
  position:fixed;
  top:0;
  width: inherit; /*унаследовать ширину родителя.
  */
  background: #ddd;
  text-align:center;
}

<div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores.   Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores.
  Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.</p>
    <div>
        <a href=''>ЦЕНТР</a>
    </div>
  </div>
  <div>
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="">8</a>
  </div>
</div>

7

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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;
}

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

Как центрировать позицию: фиксированный заголовок — HTML и CSS — Форумы SitePoint

susannelson 1 декабря 2013 г., 5:39 1

Привет,

Я настраиваю эту тему: http://demo.studiopress.com/minimum/.

Я пытаюсь сделать заголовок (часть с логотипом и меню) шириной всего 1140 пикселей вместо 100% и сделать его по центру, но я также хочу, чтобы он оставался фиксированным в верхней части экрана. Если я удалю position: fixed, он будет центрирован, но с примененным — нет.

Есть ли обходной путь для такого рода вещей?

~Сьюзен

МарПло 1 декабря 2013 г., 6:48 2

Привет
Попробуйте этот код css:

 #someid {
    положение: фиксированное;
    /* центрируем элемент */
    справа: 0;
    слева: 0;
    поле справа: авто;
    поле слева: авто;
    /* задаем размеры */
    минимальная высота: 10em;
    ширина: 90%;
}
 

ральф 1 декабря 2013 г. , 11:48 3

Отличное решение, @MarPlo. (Он также работает с требуемой шириной 1140 пикселей.)

Еще один вариант (хотя я думаю, что предпочитаю MarPlo):

 .site-header {
    положение: фиксированное;
    слева: 50%;
    поле слева: -570px;
    ширина: 1140 пикселей;
}
 

ПолОБ 1 декабря 2013 г., 13:18 4

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

Я обычно использую ту же технику, что и MarPlo, как для фиксированных, так и для абсолютных элементов. Пока элемент имеет ширину (или максимальную ширину), тогда значения left:0 и right 0 будут центрировать элемент внутри содержащего блока (как и top:0 и bottom:0 вертикально центрируют элемент с фиксированной высотой). Однако это не работает в IE7, и если требуется совместимость с IE7, другой вариант — просто вложить статический элемент желаемой ширины внутрь фиксированного элемента шириной 100% и отцентрировать его обычным способом.

Сюзаннельсон 3 декабря 2013 г., 11:27 5

Всем большое спасибо! Это решение прекрасно работает.

система Закрыто 8 октября 2014 г., 5:15 6

Классы позиционирования CSS | Quasar Framework

Классы позиционирования CSS

Стиль и фирменный стиль

Типографика

Стиль и фирменный стиль

Видимость

Стиль и фирменный стиль

Интервал

Квазар предоставляет CSS-классы, помогающие позиционировать элемент DOM. легко:

900 73 90 073

Имя класса	Описание
полноэкранный режим	Фиксированное положение, охватывающее все окна недвижимости
фиксированное	Установить положение на фиксированное без указания верхнее , левое , правое или нижнее свойства
фиксированный центр	Установить положение фиксированный , но посередине окна.
абсолютный	Установить позицию на абсолютный без указания верхний , левый , правый или bottom properties
absolute-center	Установить позицию на absolute , но в середине контейнера (контейнеру требуется относительное положение).
фиксированная верхняя абсолютная верхняя	Фиксированная или абсолютная позиция вверху экрана
фиксированная правая абсолютно правая	Фиксированное или абсолютное положение к правому краю экрана
фиксированное-нижнее абсолютное-нижнее	Фиксированное или абсолютное положение внизу экрана
фиксированное-левое абсолютное- left	Фиксированное или абсолютное положение к левому краю экрана
фиксированный верхний левый абсолютный верхний левый	Фиксированное или абсолютное положение в верхнем левом углу экрана
фиксированный верхний правый 9 0083 абсолютный верхний правый	Фиксированное или абсолютное положение в правом верхнем углу экрана
фиксированное-нижнее левое абсолютное-нижнее левое	Фиксированное или абсолютное положение внизу слева экрана
фиксированное дно- right absolute-bottom-right	Фиксированная или абсолютная позиция в правом нижнем углу экрана
fixed-full absolute-full	Фиксированная или абсолютная позиция по всем краям экрана
относительное положение	Установить положение на относительное

Имя класса	Описание
Плавающий влево	Плавающий влево
float-right	float to right
on-left	Устанавливает небольшой отступ вправо; обычно используется для элементов значков с другими братьями и сестрами
справа	Устанавливает небольшое поле слева; обычно используется для элементов значков с другими родственными элементами

СОВЕТ

Вместо использования float-left или float-right мы рекомендуем вам читать о Quasar Grid System.