- Style position Property
- Description
- Browser Support
- Syntax
- Property Values
- Technical Details
- More Examples
- Example
- Свойство position
- position: static
- position: relative
- Координаты
- position: absolute
- Расположение элементов в HTML-документе
- elementFromPoint(x, y)
- Вычисление координат относительно документа
- Javascript Reference — HTML DOM Style position Property
- Browser Support
- Syntax
- Property Values
- Technical Details
- Example
- Example 2
- Example 3
Style position Property
Change the position of a element from relative to absolute:
Description
The position property sets or returns the type of positioning method used for an element (static, relative, absolute or fixed).
Browser Support
Syntax
Return the position property:
Set the position property:
Property Values
Value | Description |
---|---|
static | Elements renders in order, as they appear in the document flow. This is default. |
absolute | The element is positioned relative to its first positioned (not static) ancestor element |
fixed | The element is positioned relative to the browser window |
relative | The element is positioned relative to its normal position, so «left:20» adds 20 pixels to the element’s LEFT position |
sticky | The element is positioned based on the user’s scroll position |
A sticky element toggles between relative and fixed , depending on the scroll position. It is positioned relative until a given offset position is met in the viewport — then it «sticks» in place (like position:fixed).
Technical Details
Default Value: | static |
---|---|
Return Value: | A String, representing the position type of an element |
CSS Version | CSS2 |
More Examples
Example
Using different position types:
function myFunction(x) <
var whichSelected = x.selectedIndex;
var posVal = x.options[whichSelected].text;
var elem = document.getElementById(«myDiv»);
elem.style.position = posVal;
>
Свойство position
Свойство position позволяет сдвигать элемент со своего обычного места. Цель этой главы – не только напомнить, как оно работает, но и разобрать ряд частых заблуждений и граблей.
position: static
Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.
Его можно также явно указать через CSS-свойство:
Такая запись встречается редко и используется для переопределения других значений 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
Абсолютное позиционирование делает две вещи:
- Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.
- Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа.
- Ширина элемента с position: absolute устанавливается по содержимому. Детали алгоритма вычисления ширины описаны в стандарте.
- Элемент получает display:block , который перекрывает почти все возможные display (см. Relationships between „display“, „position“, and „float“).
Например, отпозиционируем заголовок в правом-верхнем углу документа:
h2 Заголовок в правом-верхнем углу документа. Заголовок
А тут - всякий разный текст.
. В две строки!
Важное отличие от relative : так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство. Это видно в примере выше: строки идут одна за другой.
Так как при position:absolute размер блока устанавливается по содержимому, то широкий Заголовок «съёжился» до прямоугольника в углу.
Иногда бывает нужно поменять элементу position на absolute , но так, чтобы элементы вокруг не сдвигались. Как правило, это делают, меняя соседей – добавляют margin/padding или вставляют в документ пустой элемент с такими же размерами.
В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.
Браузер растянет такой элемент до границ.
Расположение элементов в HTML-документе
Если мы его отобразим в окне браузера, то увидим красное окно (элемент div) поверх всей страницы с положением, не зависящем от скроллинга. Но, если заменить стиль на:
то при прокрутке элемент начинает также смещаться вместе со всей страницей. Фактически, мы здесь имеем следующую картину (см. рисунок). В режиме fixed координаты left и top верхнего левого угла элемента div отсчитываются от границ клиентской области окна браузера (обозначим эти параметры через clientX, clientY). В режиме absolute отсчет идет от начала документа – параметры pageX, pageY. Теперь поставим перед собой такую задачу: нужно с помощью скрипта расположить наш блок div точно по центру окна браузера. Если мы запишем такую программу:
let wnd = document.getElementById("wnd"); let centerX = document.documentElement.clientWidth/2; let centerY = document.documentElement.clientHeight/2; wnd.style.left = centerX + "px"; wnd.style.top = centerY + "px";
То по центру будет верхний левый угол, а не сам блок. Здесь из значений centerX, centerY нужно еще вычесть половину ширины и высоты блока div. Эти величины возьмем из свойств offsetWidth/offsetHeight нашего элемента, получим:
wnd.style.left = centerX-wnd.offsetWidth/2 + "px"; wnd.style.top = centerY-wnd.offsetHeight/2 + "px";
Все, теперь блок встал точно по центру окна. Так вот, если мы теперь захотим узнать все координаты и размеры блока div, то всю эту информацию можно получить с помощью метода
let coords = elem.getBoundingClientRect();
let coords = wnd.getBoundingClientRect(); console.log(coords);
И обновим документ. В консоле увидим параметры: x/y, top/left, width/height, bottom/right Все они представлены на рисунке ниже. Причем, right = left+width
bottom = top+height Использовать эти методы бывает очень удобно для получения актуальных значений координат и размеров какого-либо элемента-тега в HTML-документе. Здесь вы можете заметить два дублирующих свойства: top = y и left = x. Зачем нужны x и y? Дело в том, что при отрицательных значениях width или height значения x и y будут соответствовать нижнему правому углу, а top и left продолжат указывать на верхний левый. Правда такие моменты редко используются на практике, да и некоторые браузеры не возвращают величины x/y (например, IE и Edge). Также следует иметь в виду, что параметры right и bottom не имеют ничего общего с аналогичными параметрами в CSS. Они только называются одинаково, но их значения совершенно разные. Если мы прокрутим страницу так, чтобы элемент ушел из области видимости, то получим отрицательные значения координат по высоте. Что, в общем-то логично, так как координаты отсчитываются от верхней и левой границ клиентского окна браузера.
elementFromPoint(x, y)
let elem = document.elementFromPoint(x, y);
который возвращает самый глубокий в иерархии элемент, на который указывает координата (x,y). Это бывает полезно, когда мы хотим узнать, что находится в данной позиции HTML-страницы. Для примера возьмем прежний документ и удалим ранее написанный скрипт. У нас блок div окажется поверх пунктов списка. Теперь возьмем координату (101, 110) так, чтобы мы указывали и на блок div и на список. Вызовем метод elementFromPoint с этими значениями и посмотрим, что он нам вернет:
let wnd = document.getElementById("wnd"); let elem = document.elementFromPoint(102, 110); console.log(elem);
Получили элемент div. Но что тогда означает фраза «самый глубокий в иерархии элемент»? Разве мы не должны были бы получить элемент списка, так как он находится глубже на странице? Не совсем так: список и div являются сестринскими элементами, то есть, у них один родитель. В этом случае возвращается тот, что находится выше. А вот если мы поместим координату над списком:
let elem = document.elementFromPoint(102, 120);
- , который является родительским по отношению к li. Вот так следует понимать работу этого метода. Этот метод возвращает элементы находящиеся в области видимости окна браузера, то есть, когда координаты x/y находятся в клиентской области. В других случаях, например, при отрицательных значениях координат, мы получим значение null.
Вычисление координат относительно документа
- pageY = clientY + высота вертикально прокрученной части документа.
- pageX = clientX + ширина горизонтально прокрученной части документа.
let wnd = document.getElementById("wnd"); console.log( getCoordFromDocument(wnd) ); function getCoordFromDocument(elem) { let coords = elem.getBoundingClientRect(); return { top: coords.top + window.pageYOffset, left: coords.left + window.pageXOffset }; }
Если мы теперь будем прокручивать страницу, то значения координат будут оставаться неизменными, т.к. их значение отсчитывается от начала документа. Итак, мы с вами рассмотрели способы позиционирования элементов в окне браузера и научились определять и задавать их координаты положения в HTML-документе.
Javascript Reference — HTML DOM Style position Property
The position property sets or gets the type of positioning method used for an element in static, relative, absolute or fixed position.
Browser Support
position | Yes | Yes | Yes | Yes | Yes |
Syntax
Return the position property:
var v = object.style.position;
Set the position property:
object.style.position='static|absolute|fixed|relative|initial|inherit'
Property Values
The property values are listed in the following table.
Value | Description |
---|---|
static | The element is laid out as normal (default value). |
absolute | Positioned relative to its first non-static positioned ancestor element |
fixed | Positioned relative to the browser window |
relative | Positioned relative to its normal position, «left:10px» adds 10 pixels to the element’s left position |
inherit | Inherit the position property from the parent element |
You use the top , bottom , left , and right properties to offset the element.
We can use the fixed value to make the element stay at the same location during the rest of the content scrolling up or down.
Technical Details
Example
The following code shows how to change the position of a element from relative to absolute:
!DOCTYPE html> html> head> style> #myDIV !--from w w w. j a v a2 s .c o m--> border: 1px solid black; background-color: lightblue; width: 300px; height: 300px; position: relative; top: 20px; > body> button onclick="myFunction()">test div >"myDIV"> p>this is a test. p>this is a test. p>this is a test. script> function myFunction() < document.getElementById("myDIV").style.position = "absolute"; >
The code above is rendered as follows:
Example 2
The following code shows how to use different position types.
!DOCTYPE html> html> body> div >"myDiv" style="top:50px;left:100px;">I am a div element. !--from w ww . j av a 2 s.c o m--> select onchange="myFunction(this);" size="4"> option>absolute option>fixed option>static option>relative script> function myFunction(x) < var whichSelected = x.selectedIndex; var posVal = x.options[whichSelected].text; var elem = document.getElementById("myDiv"); elem.style.position=posVal; >
The code above is rendered as follows:
Example 3
The following code shows how to get the position of a element
!DOCTYPE html> html> body> !-- w ww . j ava 2 s . c om--> h2 >"myH2" style="position:absolute;left:100px;top:150px;">This is a heading button type="button" onclick="myFunction()">get script> function myFunction() < console.log(document.getElementById("myH2").style.position); >
The code above is rendered as follows:
java2s.com | © Demo Source and Support. All rights reserved.