position: fixed; относительно родителя
Предварительно стоит посмотреть на возможности position: sticky; . С большой долей вероятности требуется именно он.
Позиционирование элемента с position: fixed; на всю ширину родителя
Установить всегда в верху сайта
Фиксированный блок при прокрутке слева от родителя
.raz div .raz div .raz > div < position: fixed; bottom: 0; visibility: hidden; >.raz > div > div
Прикрепить блок при скроллинге справа от предка
.raz < position: relative; >.raz > div < position: absolute; top: 0; right: 0; >.raz > div > div
Зафиксировать div в другом div справа
.raz < position: relative; >.raz > div < position: absolute; top: 0; right: 0; >.raz > div > div .raz < position: relative; >.raz > div < position: absolute; top: 0; right: 0; >.raz > div > div < position: fixed; visibility: hidden; >.raz > div > div > div
Закрепить блок с position: fixed; в центре родителя
.raz < position: relative; >.raz > div < position: absolute; top: 0; left: 50%; >.raz > div > div .raz < position: relative; >.raz > div < position: absolute; top: 0; left: 50%; >.raz > div > div < position: fixed; visibility: hidden; >.raz > div > div > div
- Как работает position: fixed;
- Как работает position: sticky;
- Зафиксировать блок или меню на CSS/JS
Михаил Гоголев Помогите. Есть сайт шириной 990px. Мне надо в правом верхнем углу разместить телефон так, чтобы при прокрутке страницы вниз он оставался на месте и чтобы при масштабировании он не выходил за ширину страницы. NMitra Располагайте в нужном месте странице по горизонтали и не прописываете свойство left . А свойством top задайте нужную высоту. Михаил Гоголев Спасибо. Мешало right )) Сменил на margin — все норм.
Свойство position
Свойство position позволяет сдвигать элемент со своего обычного места. Цель этой главы – не только напомнить, как оно работает, но и разобрать ряд частых заблуждений и граблей.
position: static
Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.
Его можно также явно указать через CSS-свойство:
position: static;Такая запись встречается редко и используется для переопределения других значений position .
Здесь и далее, для примеров мы будем использовать следующий документ:
Без позиционирования ("position: static"). Заголовок А тут - всякий разный текст.
. В две строки!
В этом документе сейчас все элементы отпозиционированы статически, то есть никак.
Элемент с position: static ещё называют не позиционированным.
position: relative
Относительное позиционирование сдвигает элемент относительно его обычного положения.
Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom .
Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:
position: relative; top: 10px; h2 Заголовок сдвинут на 10px вниз. Заголовок А тут - всякий разный текст.
. В две строки!
Координаты
Для сдвига можно использовать координаты:
- top – сдвиг от «обычной» верхней границы
- bottom – сдвиг от нижней границы
- left – сдвиг слева
- right – сдвиг справа
Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.
Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, left: 10% сдвинет элемент на 10% его ширины вправо, а left: -10% – влево. При этом часть элемента может оказаться за границей окна:
h2 Заголовок сдвинут на 10% влево. Заголовок А тут - всякий разный текст.
. В две строки!
Свойства left/top не будут работать для position:static . Если их всё же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.
position: absolute
position: absolute;Абсолютное позиционирование делает две вещи:
- Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.
- Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа.
- Ширина элемента с position: absolute устанавливается по содержимому. Детали алгоритма вычисления ширины описаны в стандарте.
- Элемент получает display:block , который перекрывает почти все возможные display (см. Relationships between „display“, „position“, and „float“).
Например, отпозиционируем заголовок в правом-верхнем углу документа:
h2 Заголовок в правом-верхнем углу документа. Заголовок А тут - всякий разный текст.
. В две строки!
Важное отличие от relative : так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство. Это видно в примере выше: строки идут одна за другой.
Так как при position:absolute размер блока устанавливается по содержимому, то широкий Заголовок «съёжился» до прямоугольника в углу.
Иногда бывает нужно поменять элементу position на absolute , но так, чтобы элементы вокруг не сдвигались. Как правило, это делают, меняя соседей – добавляют margin/padding или вставляют в документ пустой элемент с такими же размерами.
Одновременное указание left/right , top/bottom
В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.
Браузер растянет такой элемент до границ.
div 10px от границПозиционирование блока относительно родителя с помощью position: fixed
Имеем следующие стили для основного и контентного блоков:
#wrapper < width: 642px; margin: 0 auto; padding-right: 243px; >#container
у нас имеется основной контейнер шириной 885px, размещенный по центру окна, из них 642px отдано под контент, который будет находиться в левой части, а 243px в правой части выделяем под наш фиксированный блок шириной в 240px. Собственное это и делает идентификатор #wrapper .
Хочу заострить внимание на параметрах идентификатора #container , используемого для блока с основным контентом. Необходимо обязательно обозначить уровень этого слоя выше (здесь — z-index: 10 ), чем слой с фиксированным блоком (это согласно условиям моего примера, в других случаях сие может быть не обязательным), иначе в FireFox’e нельзя будет выделить текст в этом блоке в части высоты, равной высоте фиксированного блока.
Чтобы получить возможность привязать фиксируемый блок к основному контентному, я сначала задал фиксируемому блоку соответствующее позиционирование ( position: fixed ), растянув на всю ширину окна браузера, а затем поместил в него еще один блок, к которому применил абсолютное позиционирование относительно зафиксированного родительского блока, получилось следующее:
#fixed < position: fixed; top: 0; left: 0; width: 100%; >.fixed
Подобрав отступ с помощью свойства left: 323px; к блоку .fixed , отцентрированному относительно окна браузера ( margin: 0 auto; ), я сдвинул фиксируемый блок в предназначенное для него место.
В результате у меня получилось то, что я и хотел. Смотрим пример всего описанного выше.
Данный пример прекрасно работает в следующих браузерах: Opera, FireFox, Safari, IE7, но не работает в…
Internet Explorer 6
Ну, а как же без него? 🙂 Само-знамо, курилка даже не представляет, ЧТО есть значение position: fixed , поэтому опять приходится латать его дыры его же ява-скриптами.
Чтобы укротить IE6 для нашей задачи, необходимо, во-первых, вместо position: fixed использовать абсолютное позиционирование position: absolute , во-вторых, применить expression , который и фиксирует блок. И поместим код в условные комментарии.
Вот что у нас получилось:
