Clear settings
Setting clear on an element will ensure that it will not wrap around a floating element. This setting can be applied on any element stacked below the floating element, but cannot be applied to the floating element itself.
An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float
Clear none
Clear none is the default setting for most elements. Elements set to clear non will stack next to or wrap around any floating element directly above it in the document flow.
If an element has an inherited clear setting, for example from a larger breakpoint, you can clear any clear setting by setting the clear to none.
Clear left prevents an element from wrapping around an element floating to the left.
Clear right prevents an element from wrapping around an element floating to the right.
Clear both
Clear both prevents an element from wrapping around any floating element, regardless of whether it’s floating to the left or right.
Position relative (относительное позиционирование)
Если для элемента со свойством position, которому присвоен параметр relative, определить значения left, right, top или bottom, то он изменит свое местоположение относительно своей изначальной позиции. Причем положительная величина left перемещает вебэлемент вправо от его левой границы, а отрицательная — влево. Аналогичные сдвиги происходят и при применении свойства top, только в вертикальной плоскости (в случае положительного значения вниз, отрицательного — вверх):
Для примера, который поможет наглядно продемонстрировать действие данной разновидности свойства position, возьмем два контейнера, один из которых с помощью свойства float:left загоним влево, а текстовое содержание второго контейнера будет обтекать этот блок. Для наглядности придадим фон этим элементам, размеры с помощью width и height, а также необходимые отступы посредством свойства margin:
Выглядеть это будет так:
Теперь добавляем к правилу CSS для первого блока position relative, а также смещения вправо (left) и вниз (top) для того, чтобы относительное позиционирование дало результат:
В итоге результирующий вид будет таким:
Как видите, произошло смещение блока по заданным параметрам. Однако, соседний элемент не отреагировал на это и текст по-прежнему обтекает перемещенный контейнер как если бы тот оставался на своем прежнем месте.
С помощью предоставленного примера, думаю, понятно как работает относительное позиционирование, однако практическое применение в чистом виде ему найти сложно. Гораздо более востребован с этой точки зрения вариант взаимодействия параметров absolute и relative, который мы и разберем ниже.
Продвинутое абсолютное позиционирование
Перед тем как перейти к рассмотрению продвинутого применения абсолютного позиционирования, хочу обратить Ваше внимание, на то, что если вы не указываете значение вертикальной позиции элемента с абсолютным позиционированием (top , или bottom ), или наоборот горизонтальной позиции (left, или right), то браузер оставит элемент в том же месте на странице, где он находится в общем потоке (будет размещен поверх содержимого, если оно есть). Мы уже с Вами узнали о том, что элемент с абсолютным позиционированием (position: absolute) позиционируется относительно заданного края его предка, при этом предок должен иметь значение position отличное от, установленного по умолчанию — static, иначе отсчёт (смещение) будет вестись относительно, указанного края окна браузера
Настало время рассмотреть подобный пример:
Мы уже с Вами узнали о том, что элемент с абсолютным позиционированием (position: absolute) позиционируется относительно заданного края его предка, при этом предок должен иметь значение position отличное от, установленного по умолчанию — static, иначе отсчёт (смещение) будет вестись относительно, указанного края окна браузера. Настало время рассмотреть подобный пример:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Абсолютное позиционирование относительно предка</title>
<style>
.relative {
position: relative; /* относительное позиционирование элемента */
margin-top: 100px; /* внешний отступ от вержнего края */
width: 400px; /* ширина элемента */
height: 200px; /* высота элемента */
background-color: blue; /* цвет заднего фона */
}
.container {
height: 100px; /* высота элемента */
background-color: yellow; /* цвет заднего фона */
}
.absolute {
position: absolute; /* абсолютное позиционирование элемента */
top: ; /* смещение от вержнего края */
right: ; /* смещение от правого края */
width: 50px; /* ширина элемента */
height: 50px; /* высота элемента */
background-color: red; /* цвет заднего фона */
}
</style>
</head>
<body>
<div class = "relative">
relative
<div class = "container">
container
<div class = "absolute">
absolute
</div>
</div>
</body>
</html>
Давайте внимательно разберем, что мы сделали в этом примере:
Для начала мы разместили блок (элемент
), который имеет относительное позиционирование. Указали для него внутренний отступ от верха (margin-top) равный 100 пикселей, задали ширину, высоту и цвет заднего фона.
Далее внутри него разместили блочный элемент (элемент ), который имеет высоту 100 пикселей и цвет заднего фона жёлтый. Как вы понимаете, этот элемент имеет статическое позиционирование (значение по умолчанию), так как значение свойства position не наследуется, и он не унаследовал от родительского блока относительное позиционирование.
Затем мы поместили внутри нашего контейнера со статическим позиционированием элемент, который имеет абсолютное позиционирование. Указали для него ширину и высоту равными 50 пикселей и цвет заднего фона красныйОбратите внимание на самый важный момент, что этот элемент позиционируется не относительно окна браузера, не относительно родительского элемента, а относительно своего предка, который имеет позиционирование, отличное от статического! В итоге наш элемент мы разместили в верхнем правом углу его предка с относительным позиционированием
Результат нашего примера:
Рис. 160 Пример абсолютного позиционирования элемента относительно его предка.
Давайте подытожим изученную в этой статье учебника информацию о позиционировании элементов:
- Статическое позиционирование это классическое размещение элементов сверху вниз (элементы отображаются в порядке, как они указаны в потоке HTML документа), оно считается значением по умолчанию для всех элементов.
- Элемент позиционируется относительно окна браузера, если у него фиксированное позиционирование (элемент зафиксирован при прокрутке документа).
- Элемент позиционируется относительно окна браузера, если у него абсолютное позиционирование, и он не вложен в элемент, который имеет позиционирование, отличное от статического.
- Элемент, для которого задано относительное позиционирование смещается относительно положения в потоке документа (относительно его текущей позиции).
- Элемент позиционируется относительно сторон другого элемента в том случае, если он имеет предка, или родителя с абсолютным, относительным или фиксированным позиционированием.
Относительное позиционирование (relative)
Установка относительного позиционирования элементу осуществляется посредством задания ему CSS свойства .
Относительно позиционированный элемент ведёт себя как элемент в потоке за исключением того, что его текущее положение можно при помощи определённых CSS свойств сместить. К этим CSS свойствам относятся , , и .
Например, для того чтобы элемент сдвинуть вверх или вниз относительного его исходного положения к нему нужно применить CSS свойство или :
position: relative; /* для сдвига элемента вверх на 10px */ top: -10px; /* или bottom: 10px; */ /* для сдвига элемента вниз на 10px */ top: 10px; /* или bottom: -10px; */
Если одновременно установить и , то будет применено значение , т.к. оно является более приоритетным, чем :
position: relative; /* элемент или элементы, к которым применяется эти стили будут сдвинуты на 15px вверх, а не на 10px как указано в bottom */ top: -15px; bottom: 10px;
Для сдвига элемента вправо или влево используется CSS свойство или :
position: relative; /* для сдвига элемента влево на 20px */ left: -20px; /* или right: 20px; */ /* для сдвига элемента вправо на 20px */ left: 20px; /* или right: -20px; */
Если одновременно установить и , то приоритетным будет значение, находящееся в :
position: relative; /* элемент или элементы, к которым применяется эти стили будут сдвинуты на 25px вправо, т.к. значение left более приоритетно чем right */ left: 25px; right: -20px;
Для сдвига по двум осям нужно использовать или , и или :
position: relative; /* стили для сдвига элементов вверх и влево на 5px */ top: -5px; left: -5px;
Пример, в котором 2 элементу установим относительное позиционирование и сместим его на вверх и влево относительно его исходного положения:
<div class="container"> <div class="element-1">FIRST ELEMENT</div> <!-- элемент имеет относительное позиционирование и смещён на 20px вверх и влево --> <div class="element-2" style="position: relative; top: -20px; left: -20px;">SECOND ELEMENT</div> <div class="element-3">THIRD ELEMENT</div> </div>
Если в некоторой области страницы оказываются несколько позиционированных элементов, то они перекрывают друг на друга в определённом порядке. При этом по умолчанию выше оказывается тот элемент, который ниже описан в коде. Но порядок перекрытия элементов (их положение перпендикулярное экрану, т.е. вдоль оси Z) можно изменить. Осуществляется в CSS это с помощью свойства . может принимать отрицательные и положительные целые число, и . Но, хорошей практикой является использование в качестве чисел из диапазона .
При этом чем больше у элемента значение , тем ближе он располагается к нам, и, следовательно, перекрывает все элементы в данной области, у которых значение меньше.
Совместное использование position absolute и relative
Теперь рассмотрим, какой результат может дать использование в связке двух видов позиционирования. Ежели родительскому элементу присвоить значение relative, а дочернему absolute, то осуществится замена системы координат и местоположение дочернего вэбэлемента будет определяться относительно его родителя:
В качестве примера практического использования данного сочетания двух видов позиционирования приведу, пожалуй свой блог, где я недавно реализовал наложение заголовка и описания на изображение шапки. Первоначально картинка выглядела так:
Для реализации задачи я поступил следующим образом. Вначале прописал в STYLE.CSS своей темы relative для свойства position классу «site-header» родительского тега HEADER:
Также для корректного вывода мне пришлось определить ширину блока с классом «site-description», указав значение width:
Затем для класса «site-branding» дочернего контейнера DIV я указал абсолютное позиционирование и прописал отступы left и top, которые будут определять местоположение элемента в этом случае не в абсолютном исчислении (применительно к окну браузера), а относительно расположения родителя.
Также необходимо было удалить из набора правил CSS для этого тега свойство «text-align:center», чтобы выровнять текст заголовка и дескрипшн по левому краю. В результате такого взаимодействия относительного и абсолютного позиционирования задача была решена и нужный текст в виде заголовка и описания блога был наложен на изображение шапки:
Кроме предложенного мной примера с помощью связки relative absolute можно реализовать в общем случае такие задачи, которые предполагают появление и исчезание определенных вебэлементов. Причем в этом случае они не будут препятствовать правильному отображению остальных составных частей вебстраницы.
Частным случаем может стать, например, создание выпадающего меню на сайте. Это работает следующим образом. Если подвести курсор мышки к заглавному пункту меню, то появляется абсолютно позиционированный блок, сделанный на базе стандартных HTML списков. Его появление обеспечивает то обстоятельство, что соответствующему тегу назначен параметр relative свойства position.
С войство 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
редко. Как правило, это горизонтальное меню вверху или внизу страницы, как в почте Яндекса.
Пять значений позиционирования
В CSS мы имеем список из пяти значений позиционирования div-ных блочных элементов:
- Static — статическое.
- Relative — относительное.
- Inherit — унаследованное.
- Fixed — фиксированное.
- Absolute — абсолютное.
Немного расчитстим дорогу, убрав inherit
, просто потому, что это свойство позиционирования в дополнительном разборе не нуждается. Оно говорит элементу наследовать свойства родительского и всё. А в старых версиях Интернет Эксплорера и вовосе не поддерживается.
По умолчанию же, позиционирование выставляется в static
. Любой элемент со статическим позиционированием будет там, где его ждут, будучи целиком и полностью зависимымм от структуры HTML.
Теперь fixed
. Это такой якорь. Будучи оснащёнными этим значением, элементы останутся там, куда мы их поместим и не сдвинутся с места даже при прокрутке . Это часто используется для фиксации боковых панелей навигации, что конечно ужас для контента.
Так что, с тремя значениями позиционирования мы разобрались и можем считать их понятными. Просто потому, что их функционал не имеет, ни повторений, ни вариаций. Остаются интересности — absolute
и relative
. Взглянем на них по отдельности, а потом на то, как они могут быть использованы вместе. А ещё на то, какие интересные результаты это может дать.
CSS Tutorial
CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL
CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand
CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders
CSS Margins
Margins
Margin Collapse
CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset
CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow
CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand
CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive
CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples
CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar
CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions
С войство 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-ий оказался нижним «слоем»:
Я, как и автор статьи, много до чего добрался в CSS методом тыка, а ещё больше упустил. В особенности времени. И если бы сразу разобрался с принципами таких штук, как позиционирование и обтекание (positioning, float), то простые задачи действительно оказались бы простыми с самого начала. Для этого часто не хватает мест, где бы нам на пальцах объясняли коллизии и аномалии тех языков программирования, которым нас внезапно не обучают с детства. Ну не понятны они нам на интуитивном уровне, чо уж. Да и хэлпы не всегда прочитываются.
Если у вас та же история, то это ваше чтение на вечер.
Одним из откровений, посетивших меня по прочтении, стало понимание работы позиционирования, в особенности — разница между абсолютным и относительным (absolute, relative). Если дочитаете до конца, то будете точно знать — когда и как работает каждое. Здесь всё изложено на примерах списков и картинок.
What is the default position of HTML elements in CSS?
By default, the property for all HTML elements in CSS is set to . This means that if you don’t specify any other value or if the property is not declared explicitly, it’ll be .
Visually, all elements follow the order of the HTML code, and in that way the typical document flow is created.
Elements appear one after the other – directly below one another, according to the order of the HMTL code.
Block elements like are stacked one after the other like this:
The property isn’t declared in the above code and it therefore reverts to the default . It follows the order of the HTML code.
Whatever comes first in the HTML is shown first, and each element follows the next, creating the document flow as I described above.
In our code here, the div with the text «One» is written first so it is shown first on the page. Directly below that, the box with the text «Two» is shown, since it also comes next in the HTML, and so on.
This default positioning doesn’t leave any room for flexibility or to move elements around.
What if you wanted to move the first square a bit towards the left of the page – how would you do that?
There are offset properties to do so, like , , and .
But if you try to apply them while the square has this default static position applied to it, these properties will do nothing and the square will not move.
These properties have no effect on .
Абсолютное позиционирование (absolute)
Установка абсолютного позиционирования элементу осуществляется посредством задания ему .
Этот тип позиционирования позволяет разместить элемент именно там, где вы хотите.
Позиционирование выполняется относительно ближайшего позиционированного предка.
<div id="id-1" style="position: absolute">
<div id="id-2" style="position: relative">
<div id="id-3" style="position: absolute">
...
</div>
</div>
</div>
Под позиционированным элементом понимается элемент с , равным , , или .
В этом примере позиционирование элемента будет выполнять относительно , т.к. он является позиционированным и является по отношению к нему более близким предком.
Если данный элемент не был бы позиционированным, то позиционирование выполнялось бы относительно :
<div id="id-1" style="position: absolute">
<div id="id-2">
<div id="id-3" style="position: absolute">
...
</div>
</div>
</div>
Если среди предков у элемента с нет позиционированного элемента, то в этом случае он будет позиционироваться относительно HTML страницы, т.е. элемента .
Когда элементу устанавливаем без указания CSS-свойств (, , и ), определяющих его положение, он будет находиться в том месте, в котором он был бы расположен, если бы находился в потоке (при этом при вычислении его положения учитываются только элементы, расположенные до него в коде и находящиеся в потоке).
При этом другие элементы его видеть не будут, и, следовательно, они будут расположены на странице, не обращая никакого внимание на него
<div class="container"> <div class="element-1">FIRST ELEMENT</div> <!-- элемент имеет абсолютное позиционирование и ему не установлены CSS-свойства top, bottom, left и right --> <div class="element-2" style="position: absolute;">SECOND ELEMENT</div> <div class="element-3">THIRD ELEMENT</div> </div>
CSS-свойства для управления положением абсолютно позиционированного элемента работают по-другому чем с .
CSS-свойства , , и задают положение элемента относительно ближайшего позиционированного предка или , если такого предка нет.
Установить ширину (высоту) абсолютно позиционированному можно с помощью установки ему двух координат и ( и ).
Если элементу одновременно установить , и , то предпочтение будет отдано и .
Абсолютное позиционирование применяется очень часто совместно с относительным позиционированием в дизайнерских целях, когда необходимо разместить различные элементы относительного друг друга, так же может применяться для создания выпадающих меню, разметки сайта и т.д.
<body> <div style="width: 200px; height: 100px; border: 1px solid black; background: green;"></div> <div style="width: 300px; height: 200px; position: absolute; top: 50px; left: 100px; border: 1px solid black; background:red;"></div> </body>
Что такое абсолютное позиционирование CSS?
Позиционирование выполняется относительно первого позиционированного родительского элемента. В случае, когда родительского элемента нет, позиционирование будет осуществляться непосредственно по отношению к элементу HTML (самой странице).
В следующем примере для родительского элемента задано относительное позиционирование. Теперь, когда мы используем для дочернего элемента значение absolute, любое дополнительное позиционирование будет выполняться относительно родительского элемента. Дочерний элемент перемещается относительно вершины родительского элемента на 100 пикселей и правее родительского элемента на 40 пикселей.
CSS
#parent {
position: relative;
width: 500px;
height: 400px;
background-color: #fafafa;
border: solid 3px #9e70ba;
font-size: 24px;
text-align: center;
}
#child {
position: absolute;
right: 40px;
top: 100px;
width: 200px;
height: 200px;
background-color: #fafafa;
border: solid 3px #78e382;
font-size: 24px;
text-align: center;
}
В этих примерах мы продемонстрировали различия между абсолютно и относительно позиционированными элементами. Надеемся, эта статья поможет вам в будущих проектах.
Position Absolute
Элемент является абсолютно позиционированным
Элементу можно задавать свойства , , , ,
Если элементу не задавать свойства , , , , то элемент будет установлен на то место, где он бы находился при , при этом не сохраняя свое пространство между соседними элементами
Элемент не виден для соседних элементов и не занимает пространство между ними
Границы элемента видны для дочерних элементов, у который свойство имеет одно из следующих значений — , , ,
Зададим зелёному элементу
Зелёный элемент больше не занимает пространство между соседними элементами и должен смещаться на указанные сверху и слева от ближайшего родительского позиционированного элемента, но такого родительского элемента у нас пока нет
Так как элемент , серый и жёлтый элементы не позиционированы (то есть у них по-умолчанию установлено ), то зелёный элемент смещается от границ окна браузера
Чтобы зелёный элемент смещался от границ серого элемента, зададим серому элементу свойство c любым значением, отличным от
Зададим серому элементу , что сделает его позиционированным
Теперь зелёный элемент смещается на указанные сверху и слева от границ серого элемента, как от ближайшего родительского позиционированного элемента
Сделаем жёлтый элемент тоже позиционированным, для этого добавим ему
Теперь ближайшим родительским позиционированным элементом для зелёного элемента является жёлтый элемент, поэтому зелёный элемент теперь смещается на указанные сверху и слева от границ жёлтого элемента
К примеру, теперь мы хотим смещать зелёный элемент от нижней и правой границ жёлтого элемента. Попробуем добавить и
Но зелёный элемент остается на месте и по прежнему смещается от верхней и левой границ жёлтого элемента
Чтобы, все-таки, смещать зелёный элемент от нижней и правой границ жёлтого элемента, необходимо учитывать следующий нюанс — если одновременно заданы свойства и , то приоритет будет иметь свойство , а свойство будет игнорироваться. Тоже самое и со свойствами и — если они заданы одновременно, то приоритет имеет свойство , а свойство игнорируется
Этот нюанс необходимо учитывать для элементов, у которых заданы размеры. Случай, когда размеры элемента не заданы мы разберём ниже
Удалим свойства и , чтобы остались только свойства и
Теперь все работает корректно, и зелёный элемент смещается от нижней и правой границ жёлтого элемента
Для полной картины удалим оставшиеся свойства и
Зелёный элемент устанавливается на то место, где он бы находился при , но при этом не сохраняет свое пространство между соседними элементами
Рассмотрим пример, когда у зелёного элемента не заданы размеры. В таком случаем мы можем использовать свойства / и / одновременно
Сбросим у зелёного элемента ширину и высоту — , а также добавим одновременно
Так как размеры у зелёного элемента теперь не указаны, мы используем свойства / и / одновременно, и зелёный элемент растягивается на всё пространство родительского жёлтого позиционированного элемента и смещается от его границ на указанные расстояния со всех сторон
Примеры
В примере используются различные значение атрибута position для изменения способа позиционирования текста.
<style type="text/css">
.pitem {
position: static;
}
</style>
<script type="text/javascript">
function fnAbsolute(){
oSpan.style.position="absolute";
}
function fnRelative(){
oSpan.style.position="relative";
}
function fnStatic(){
oSpan.style.position="static";
}
</script>
<p><span id="oSpan" class="pitem">Это <b>афрагмент</b> параграфа текста.</span>
This is a paragraph of text.</p>
<input onclick="fnRelative()" type="button" value="Relative">
<input onclick="fnAbsolute()" type="button" value="Absolute">
<input onclick="fnStatic()" type="button" value="Static">
Замечания
Задание свойству position значения absolute автоматически встраивает элемент в web-документ, не учитывая расположение других элементов на странице. Если другие, ранее описанные элементы, уже находятся на определенных местах, то добавление нового элемента может вызвать их взаимное перекрытие. Такое перекрытие можно контролировать с помощью свойства z-index. У абсолютно позиционированных элементов нет отступов margin, но есть padding и border.
Чтобы определить элементу абсолютное позиционирование, надо помимо задания значения absolute для свойства position определить хотя бы одно из свойств top, bottom, left, или right. Иначе, этим свойствам будут заданы их значения по умолчанию, и элемент будет немедленно отображен на странице после предыдущего объекта в соответствии с правилами HTML.
Если элемент перекрыт другим объектом, причем даже если этот объект невидим, то его нельзя активировать, например, используя мышь. Тоже самое справедливо для позиционированных объектов с отрицательным значением z-index кроме:
родительским элементом является объект с прокручиваемым содержимым (это значит, что свойство overflow принимает значение auto или scroll).
родительским элементом является позиционированный объект (свойству position задано значение absolute или relative).
Задание свойству position значения relative встраивает элемент в web-документ, но с учетом расположения уже имеющихся в документе элементов. Следующий пример показывает как написать скрипт, чтобы текст, находящийся внутри <span> стал позиционирован относительно (relative) по отношению к предыдущему тексту параграфа.
<p>The superscript in this name
<span style="position: relative;
top: -3px">xyz</span> is "xyz".</p>
У каждого элемента, который позиционирон относительно имеется свое собственно место в web-документе, то есть он не перекрывает другие элементы как в случае с абсолютным позиционированием. Помещение абсолютно позиционированного элемента за областью видимости окна приводит в появлению полос прокрутки; если применяется относительное позиционирование, то полосы прокрутки не появляются.
Размер контента задает размер объекта и его размещение. Например, задание свойств position и height для объекта div определяет его размещение. В данном случае, размер контента влияет на размер width объекта div.
Internet Explorer 7.0 Значение fixed для позиционирования поддерживается только для страниц с объявленной директивой <!DOCTYPE>.
