Свойство CSS position задаёт способ позиционирования элемента на странице.
Возможные значения:
absolute — элемент будет абсолютно позиционирован на странице. Положение элемента задаётся при помощи свойств left, top, bottom, right. На расположение также влияет значение свойства position родительского элемента. Если родителя нет, или он имеет position:static, то позиция отсчитывается относительно окна браузера. Если свойство position родительского элемента равно fixed, relative или absolute, то позиция отсчитывается относительно родительского элемента. Другие элементы будут расположены так, словно элемента на странице нет.
fixed — позиция задаётся относительно окна при помощи left, top, bottom и right и она не меняется при прокручивании страницы.
relative — свойства left, top, bottom и right указывают смещение элемента относительно исходного места, но сам элемент продолжает занимать исходное место. Все другие элементы располагаются на странице так, будто элемент находится на своём обычном месте.
static — элемент отображается как обычно. Является значением по умолчанию. Свойства left, top, bottom и right игнорируются.
Значение по умолчанию: static
Наследуется: нет
Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <title>CSS position example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> <div> Элемент по умолчанию имеет position:static; </div> <div style="position:relative; left:-20px;"> Пример position:relative; left:-20px; </div> <div style="position:fixed; top:50px; left:200px;"> Пример position:fixed; top:50px; left:200px; Позиция фиксирована относительно экрана. При прокручивании остаётся на месте. </div> <div style="position:absolute; top:80px; left:180px;"> position:absolute; top:80px; left:180px; Абсолютная позиция на странице. Прокручивается вместе с содержимым. </div> <div> <a href="https://urvanov.ru/2016/02/29/css-position/">CSS position</a> </div> <p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p> <p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p> <p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p> <p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p> <p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p> <p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p> <p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p> <p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p> <p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p> <p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p> <p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p><p>абзац</p> </body> </html> |