Тарифы Услуги Сим-карты

Position Relative - что это? Подробное описание. CSS позиционирование: абсолютное, относительное

letter-spacing line-height list-style margin max-height max-width min-height min-width outline overflow padding position right text-align text-decoration text-indent text-transform top vertical-align white-space width word-spacing
  • Справочник HTML Уроки HTML Видеокурсы по созданию сайта
  • С войство POSITION

    Свойство Значения Пр* Нc*
    position static , relative, absolute, fixed, inherit + -

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

    Значения:

    static — статическое позиционирование, как есть.
    inherit — наследование свойств от родителя.

    Остальные значения рассмотрим подробнее.

    Значение relative: относительное позиционирование

    Элемент смещается относительно своего положения на величины, заданные значениями свойств Bottom, Left, Right, Top . Это не оказывает влияние на расположение элементов в нормальном потоке, следующих за ним, как будто он не смещался.

    Element { position: relative; top: 25px; left: 50px; height: 100px; width: 100px; border: 2px solid #000;}
    — для блока с картинкой задано позиционирование relative и смещение сверху на 25px и слева на 50px. Элемент сместился относительно нормального потока, на практике удвоив эти значения:

    Значение absolute: абсолютное позиционирование

    Элемент с абсолютным позиционированием занимает положение, определённое значениями свойств Bottom, Left, Right, Top , которые задают его смещение относительно границ родителя.

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

    Element { position: absolute; top: 25px; left: 50px; height: 100px; width: 100px; border: 2px solid #000;}

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

    Значение fixed: фиксированное позиционирование

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

    Используют значение fixed редко. Как правило, это горизонтальное меню вверху или внизу страницы, как в почте Яндекса.

    С войство Z-INDEX

    Свойство Значения Пр* Нc*
    ЦЕЛОЕ ЧИСЛО, auto , inherit + -

    Свойство задаёт размещение позиционированного элемента относительно оси Z. Что означает: элементы накладываются друг на друга в порядке возрастания — чем больше значение свойства z-index, тем выше расположен элемент. Действует только для элементов, у которых задано значение свойства Position и отлично от static .

    Значения:

    auto — элементы размещаются в порядке их расположения в коде страницы.
    inherit — наследование от родителя.

    Element-1, .element-2, .element-3 { position:relative;}
    .element-1 { z-index:3; left:40px; top:50px; font-size:46px;}
    .element-2 { z-index:2; left:50px;}
    .element-3 { z-index:1; top:-50px;font-size:76px; color:#999;}

    — в качестве второго элемента у нас изображение. Поменялся порядок размещения у первого и третьего элементов. Нижний элемент-1 разместился сверху, а 3-ий оказался нижним «слоем»:

    Описание

    Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

    Синтаксис

    position: absolute | fixed | relative | static | inherit

    Значения

    absolute Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left , top , right и bottom , также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed , relative или absolute , то отсчет координат ведется от края родительского элемента. fixed По своему действию это значение близко к absolute , но в отличие от него привязывается к указанной свойствами left , top , right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. relative Положение элемента устанавливается относительно его исходного места. Добавление свойств left , top , right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. static Элементы отображаются как обычно. Использование свойств left , top , right и bottom не приводит к каким-либо результатам. inherit Наследует значение родителя.

    HTML5 CSS2.1 IE Cr Op Sa Fx

    position

    Результат данного примера показан на рис. 1.

    Рис. 1. Применение свойства position

    Объектная модель

    document.getElementById("elementID ").style.position

    Браузеры

    Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit .

    Здравствуйте, уважаемые читатели блога сайт. Сегодня мы поговорим о принципах позиционирования Html элементов с помощью CSS правил Position (со значениями absolute, relative и fixed) и свойств, задающих смещение left, right, top и bottom. Видите звездочку в левом нижнем углу? Дочитав статью до конца, вы узнаете как она туда попала.

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

    Первый контейнер мы изначально заставим плавать влево с помощью соответствующего свойства, а т.к. он будет пустой, то мы зададим ему (и отступы с помощью margin):

    text text ...

    В результате мы получим примерно такую картину маслом:

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

    Теперь давайте добавим к CSS правилам для первого контейнера position: relative и зададим отступы слева и сверху с помощью Left и top:

    text text ...

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

    Обратите внимание, что текст по-прежнему продолжает его обтекать так, как будто бы он все еще стоит на своем месте. Т.е. многие Html теги при своем построении считают, что он находится на своем законном месте (без учета заданных нами в правилах Left и top сдвигов).

    Но так будут делать не все тэги, иначе бы мы не увидели никаких изменений. Ближайший предок с прокруткой (в нашем случае это будет тег Html, т.е. фактически область просмотра) эти изменения заметит.

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

    Position absolute — абсолютное позиционирование в CSS

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

    Но сначала посмотрим на эту конструкции еще без добавления «position: absolute». При этом для подчеркивания строчности Span добавим ему высоту, которая все равно не применится, а CSS код на сей раз добавим для разнообразия не через внутри конструкции Head:

    <style type="text/css"> #abs{ background:#FFC0C0; margin-left: 100px; } #abs span{ background:#C0FFC0; height:100px; }

    Первое второе и третье

    Для 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 для таких тэгов проявляться не будет. Т.е. ему никто не сможет передать свои вертикальные отступы и он никому передать их не сможет тоже (ни с кем не делится вертикальными отступами).

      Если вы вспомните предыдущую статью из рубрики « », то увидите, что все эти три пункта наблюдались и при создании плавающих элементов с помощью 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 используется структура предков и потомков, о которой я уже довольно подробно писал в статье про . Наша задача, при определении контейнера для тега с абсолютным позиционированием, будет заключаться в поиске предка с 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. Помните, что в умолчательных значениях для этого тега прописаны отступы margin в 8 пикселей, которые мы и наблюдаем:

    А теперь давайте в дополнение к уже проделанному пропишем «position: relative» и для контейнера Div, внутри которого и живет тег Span:

    Первое второе и третье

    Как видим, картина поменялась. Несмотря на то, что relative прописано и для Body, и для Div, контейнером для абсолютно спозиционированного Span стал именно Div, т.к. он является первым предком , у которого значение position отлично от static.

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

    #abs{ background:#FFC0C0; margin-left: 100px; position: relative; border:12px dotted #ccf; padding:20px; }

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

    Отступы (смещение) Left, right, top и bottom можно задавать не только в абсолютных единицах (читайте про ), но и в процентах, которые будут браться от ширины (left и right) и высоты (top и bottom) полученного контейнера. Т.е. «top:100%» будет соответствовать 100% высоты контейнера, а «left:100%» — 100% от его ширины.

    И именно описанное выше взаимодействие я имел в виду, говоря про связку position absolute и relative . У нас благодаря этому появляется возможность самим выбирать контейнер или же, другими словами, точку отсчета при абсолютном позиционировании. Для чего же на практике используют эту связку?

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

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

    Для выпадающего меню делают примерно следующее. При наведении курсора мыши (задается в CSS с помощью ) на корневой пункт меню появляется абсолютно спозиционилованный с помощью «absolute» элемент (вложенные пункты меню, созданные на основе ). Появляется этот выпадающий список рядом с корневым пунктом меню по той простой причине, что в нем прописан position: relative. Все.

    Position fixed — привязка к области просмотра

    Последним способом позиционирования является «position: fixed» . Рассмотренные ранее способы были рассчитаны на размещение относительно каких-либо элементов Html кода. Но если мы начинаем прокручивать страницу, то и ее теги (даже имеющие абсолютное или относительное позиционирование) перемещаются вверх (или вниз).

    А вот при использовании fixed такого уже происходить не будет. Спозиционирванный таким образом элемент всегда будет находиться в одном и том же положении в области просмотра, вне зависимости от прокрутки веб страницы. Вы, наверное, такие варианты уже встречали на сайтах. Например, на подобном эффекте построена работа довольно популярного плагина для WordPress под названием .

    Для тэга с прописанным position:fixed контейнер никто не ищет, ибо им является сама область просмотра. Именно в этом заключается отличие от «absolute», а все остальное у них совпадает. Блоки с фиксированным размещением при прокрутке страницы ведут себя так, как будто это элементы интерфейса окна вашего браузера (они всегда под рукой).

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

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

    Удачи вам! До скорых встреч на страницах блога сайт

    посмотреть еще ролики можно перейдя на
    ");">

    Вам может быть интересно

    Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
    Float и clear в CSS - инструменты блочной верстки
    List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
    Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице
    Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка

    Свойство CSS position отвечает за месторасположения элемента относительно других элементов. Используется в стилях довольно часто и поддерживается всеми браузерами (Internet Explorer, Netscape, Opera, Safari, Mozilla, Firefox, Chrome, Яндекс Браузер). Приведем простенький пример для понимания.

    Примера 1 . HTML-код:

    Обычный текст Этот текст ниже на 10 пикселей А этот наоборот выше

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

    Это самый простой пример использования свойства CSS position . Теперь давайте рассмотрим все возможные атрибуты, которые может принимать этот параметр.

    Синтаксис CSS position

    position : absolute | fixed | relative | static | inherit ;

    Примечание: через | перечислены все его возможные значения. Рассмотри каждый параметр в отдельности

    1. CSS position: relative

    Свойство position: relative - относительное позиционирование. Мы видели пример использования этого элемента чуть выше.

    При задании этого параметра, активизируются следующие параметры:

    • bottom
    • left
    • right

    Если не указано никаких смещений, т.е.

    top : 0px ; bottom : 0px ; left : 0px ; right : 0px ;

    то отображение html-элемента происходит на том же месте как и по умолчанию (т.е. без задания relative). Если же указаны смещения, то элемент будет смещен относительно своего расположения либо ниже, выше, левее или правее. При этом другие окружающие элементы считают, что никакого смещения нету. Короче говоря, использовать relative имеет смысл только если мы задали смещения.

    Для пояснения этой особенности приведем пример.

    Примера 2 . HTML-код:

    В чем же тогда разница?...

    Примера 2* . Добавим к первому диву: position: relative; . HTML-код:

    В чем же тогда разница? ...

    Код преобразуется в следующее:

    Наш красный квадрат переместился на 200 пикселей влево и на 100 пикселей вниз и частично своей площадью закрыл текст. При этом то место, где должен был наш квадрат текст по-прежнему его огибает как будто он там есть.

    2. CSS position: absolute

    Свойство CSS position: absolute - в данном случае считается, что начало отсчета - левый верхний угол. Здесь также действуют свойства top , bottom , left , right . При этом элемент который обладает атрибутом absolute становится как бы блочным элементом. Приведем пример.

    Примера 3 . HTML-код:

    Текст один Текст два Текст три

    Код преобразуется в следующее:

    В данном случае все три текста написаны друг за другом. Заметим, что мы специально сделали отступ слева padding-left:100px; в 100 пикселей. Теперь рассмотрим, что будет если мы во второй font добавим атрибут position: absolute .

    Примера 3* . HTML-код:

    Текст один Текст два Текст три

    Код преобразуется в следующее:

    Заметим, что текст два уехал влево и теперь стоит на первой позиции. При этом текст три занял место второго. Почему так произошло? Потому что мы добавили position:absolute и отступ слева: left:0px . Как я писал выше, при атрибуте absolute начало отсчета для элемента становится - левый верхний угол.

    3. CSS position: fixed

    Свойство CSS position: fixed - фиксированное расположение элемента, даже при прокрутке скролла. Пожалуй, это один из самых распространенных вариантов использования position. Если при этом заданы параметры top и left, то элемент будет размещен относительно левого верхнего угла. Если же параметры не указаны, то он будет фиксироваться в таком положении, как он встретиться на странице. Приведем пример.

    Примера 4. HTML-код:

    Фиксированный текст

    Тут идет текст текст текст
    Тут идет текст текст текст ...

    Код преобразуется в следующее:

    В данном примере верхняя строчка с текстом "фиксированный текст" всегда видна на странице браузера в любом положении скролла. Это свойство часто используют сайты, которые размещают рекламные строчки типо NOLIX, DAOS и т.п. См. как сделать строку как NOLIX и DAOS .

    4. Остальные значения CSS position

    4.1. Свойство position: static - этот параметр стоит по умолчанию. Параметры left, top, right и bottom не работают при этом значении.

    4.2. Свойство position: inherit - наследование значение родителя. Т.е. смотрится ближайший элемент, в который заключен этот html-элемент и наследуется его значение.

    Для обращения к position из JavaScript нужно писать следующую конструкцию:

    document.getElementById("elementID").style.position ="VALUE "

    position

    Свойство CSS position используется для указания способа позиционирования HTML-элемента на странице. Само изменение позиции элемента осуществляется с помощью свойств top , right , bottom и left .

    Тип свойства

    Назначение: позиционирование .

    Применяется: ко всем элементам.

    Наследуется: нет.

    Значения

    Значением свойства CSS position является одно из ключевых слов задающих способ позиционирования.

    • static - обычное расположение элемента на странице, с учетом его типа (блочный, встроенный и т.д.) и элементов окружающих его.
    • relative - относительное позиционирование. Сначала браузер устанавливает элемент, как при обычном расположении, а потом смещает его относительно данного места. При этом остальные HTML-элементы ведут себя так, будто элемент никуда не перемещался, то есть место, где он находился до смещения, остается незанятым, а на новом месте они его «не видят».
    • absolute - абсолютное позиционирование. Позиционирование элемента происходит относительно его ближайшего предка, у которого значение свойства position не равно static (то есть position присутствует сразу у двух элементов). Если же такого предка нет, то элемент позиционируется относительно окна браузера. При этом окружающие HTML-элементы ведут себя так, будто абсолютно позиционируемого элемента вообще нет на странице, то есть форматирование происходит без его участия.
    • fixed - тоже абсолютное позиционирование. Почти такое же, как и absolute , только здесь элемент вообще не может позиционироваться относительно какого-либо элемента‑предка, а только относительно окна браузера, поэтому свойство position используется только для самого элемента. Вдобавок при прокрутке (скроллинге) элемент не меняет своего местоположения в окне.
    • inherit - наследует значение свойства CSS position от родительского элемента.

    Как вы знаете, обычным втроенным (inline) элементам нельзя явно задать высоту (CSS ) или ширину (CSS ). Однако, если к встроенному элементу применяется позиционирование со значением absolute или fixed , то размеры у него становятся изменяемые. Помните об этой особенности, часто она очень помогает.

    Процентная запись: не существует.

    Значение по умолчанию: static.

    HTML-элементы называются предками для тех тегов, которые находятся внутри них на любом уровне вложенности, а родительскими для тех, которые находятся внутри них на первом уровне. Естественно предки являются одновременно и родительскими элементами для своих потомков первого уровня вложенности (дочерних).

    Естественно при позиционировании вовсе не обязательно использовать свойства CSS top , right , bottom или left , чтобы изменить положение элемента. Да, при относительном позиционировании это не даст особого эффекта - элемент будет вырван из прямого потока, но его место все-равно никто не сможет занять. А вот при абсолютном, элемент будет не только «вырван» из контекста HTML-страницы, но и нижестоящие элементы займут его место. Причем при position: fixed он еще и будет оставаться на одном месте при скроллинге.

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

    Синтаксис

    position: static | relative | absolute | fixed | inherit

    Пример CSS: использование position

    seodon.ru - <a href="/the-device/svoistva-css-intervaly-str-1-rasstoyanie-mezhdu-bukvami-css-letter-spacing.html">CSS свойство</a> position

    Этот блок DIV2 абсолютно позиционирован относительно окна браузера и будет зафиксирован при скроллинге.
    Этот DIV3 тоже зафиксирован, но вы его вообще не увидите, так как задано очень большое смещение и он будет всегда находиться в 20500px от верха окна.

    Версии CSS

    Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
    Поддержка: Нет Да Да Да

    Браузеры

    Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera
    Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
    Поддержка: Частично Да Да Да Да Да

    Internet Explorer 6.0 и 7.0 не понимают значение inherit , IE 6.0 еще не понимает и fixed .