Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о CSS-свойствах position и float .
1. position: staticПо умолчанию все элементы на странице имеют статическое позиционирование (position: static), это означает, что элемент не позиционирован, и появляется в документе на своем обычном месте, то есть в том же порядке, как и в html-разметке.
Нет необходимости специально назначать это свойство какому-либо элементу, если только вам не требуется изменить ранее установленное позиционирование на дефолтное.
#content{ position: static; }
2. position:relativeОтносительное позиционирование (position: relative) позволяет вам использовать свойства: top, bottom, left и right, для расположения элемента относительно того места, где бы он появился при обычном позиционировании.
Давайте переместим #content на 20 пикселей вниз, и на 40 пикселей влево:
#content{ position: relative; top: 20px; left: -40px; }
Обратите внимание, что на том месте, где бы должен был находится наш блок #content, теперь образовалось пустое пространство. Следующий за блоком #content, блок #footer не переместился ниже, потому что, #content по-прежнему занимает свое место в документе, несмотря на то, что мы передвинули его.
На данном этапе может показаться, что относительное позиционирование не так уж и полезно, но, не спешите с выводами, далее в статье, вы узнаете, для чего его можно использовать.
3. position: absoluteПри абсолютном позиционировании (position: absolute), элемент удаляется из документа, и появляется там, где вы ему скажете.
Давайте, для примера, переместим блок #div-1a в верхний, правый угол страницы:
#div-1a { position:absolute; top:0; right:0; width:200px; }
Обратите внимание, что на этот раз, поскольку блок #div-1a был удален из документа, оставшиеся элементы на странице расположились по-другому: #div-1b, #div-1c и #footer переместились выше, на место удаленного блока. А сам блок #div-1a, расположился точно в правом, верхнему углу страницы.
Таким образом, мы можем позиционировать любой элемент относительно страницы, однако этого не достаточно. На самом деле, нам необходимо позиционировать #div-1a относительно родительского блока #content. И на этом этапе, относительное позиционирование вновь вступает в игру.
4. position: fixedФиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.
#div-1a { position:fixed; top:0; right:0; width:200px; }
В IE с position: fixed не все так гладко, как бы нам хотелось, но существует множество способов обойти эти ограничения.
5. position:relative + position:absoluteНазначив блоку #content относительное позиционирование (position: relative), мы сможем позиционировать любые дочерние элементы, относительно его границ. Давайте разместим блок #div-1a, в верхнем правом углу блока #content.
#content { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; }
Вооружившись знаниями из предыдущих шагов, можно попробовать сделать две колонки, с помощью относительного и абсолютного позиционирования.
#content { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }
Одним из преимуществ абсолютного позиционирования, является возможность размещать элементы в произвольном порядке, независимо от того, как именно они расположены в разметке. В приведенном выше примере, блок #div-1b расположен перед блоком #div-1a.
А сейчас у вас должен был возникнуть вопрос: “А куда же делись остальные элементы из нашего примера?”. Они скрылись под абсолютно расположенными блоками. К счастью, есть возможность это исправить.
7. Две колонки с фиксированной высотойОдно из решений – задать фиксированную высоту контейнеру, содержащему колонки.
#content { position:relative; height: 450px; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }
Решение не очень подходящее, поскольку мы никогда не знаем заранее, какого размера текст, будет расположен в колонках, и какой шрифт будет использован.
8. FloatДля колонок с переменной высотой, абсолютное позиционирование не подходит, поэтому давайте рассмотрим другой вариант.
Назначив блоку float, мы максимально возможно оттолкнем его к правому (или левому) краю, а следующий за блоком текст, будет обтекать его. Обычно такой прием используется для картинок, но мы будем использовать его для более сложной задачи, поскольку это единственный инструмент, имеющийся в нашем распоряжении.
#div-1a { float:left; width:200px; }
Если назначить первому блоку float: left, а затем второму float: left, каждый из блоков прижмется к левому краю, и мы получим две колонки, с переменной высотой.
#div-1a { float:left; width:150px; } #div-1b { float:left; width:150px; }
Также, можно назначить колонкам противоположное значение float, в этом случае, они распределятся по краям контейнера.
#div-1a { float:right; width:150px; } #div-1b { float:left; width:150px; }
Но теперь у нас появилась другая проблема – колонки выходят за пределы родительского контейнера, тем самым ломая всю верстку. Эта самая распространенная проблема начинающих верстальщиков, хотя решается она довольно просто.
10. Очистка floatЧистку флоатов можно делать двумя способами. Если после колонок идет еще один блок, достаточно назначить ему clear: both.
#div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; }
Или же назначить родительскому контейнеру свойство overflow: hidden
#content { overflow:hidden; }
В любом случае, результат будет один и тот же.
Сегодня были рассмотрены только базовые приемы позиционирования, и самые простые примеры. Также, в помощь начинающим верстальщикам я всегда рекомендую цикл статей Ивана Сагалаева, которые в свое время мне очень помогли.
Выше мы говорили о том, что позиционировать элементы страницы можно путем использования таблиц. Но это же можно делать и с помощью стилей. Среди параметров стиля имеются специальные свойства для позиционирования:
- left - для задания расстояния в пикселах от левого края окна (х-координата);
- top - для задания расстояния в пикселах от верхнего края окна (у-координата);
- z-index - для указания порядка, в котором элементы будут перекрывать друг друга; это новое измерение, элементы с большим z-индексом будут появляться над элементами с меньшим z-индексом.
Конечно, при использовании этих трех свойств не создается эффект трехмерного
пространства, но это уже нечто большее, чем плоская поверхность. В этом
случае говорят о 2,5-мерном пространстве.
Кроме свойств-координат, нам понадобится свойство роsition
,
которое в сочетании со свойствами left
и
top
позволяет устанавливать элементы в определенные
позиции окна. Свойство position может принимать три значения:
- absolute - заданные свойства left и top поставят элемент в точку с координатами х и у относительно верхнего левого угла контейнера (объекта, содержащего данный элемент). Если они определены для элемента вне контейнера, то началом отсчета координат будет верхний левый угол страницы. Заметим, что положение элемента не зависит от положения его тега внутри HTML-документа;
- relative - элемент будет установлен в соответствии с тем, в каком месте исходного текста он находится; это значение установлено по умолчанию. Например, если элемент находится в трех строках от начала его выделения в тексте документа, то по умолчанию считается, что свойство позиционирования имеет значение relative , а свойства координат left и top - нулевые значения. Ненулевые значения свойств left и top задают сдвиг элемента относительно исходного положения;
- static - элемент будет поставлен в некоторое положение относительно фона и не будет перемещаться при прокручивании страницы.
Следующий пример показывает использование свойства z-index . Хотя в тексте программы картинка описана выше остальных элементов, за счет присвоения ей индекса с большим номером происходит перемещение ее поверх первого текста. Таким образом, использование свойства z-index освобождает от пут естественного порядка упоминания элементов в тексте HTML-программы.
Позиционирование
nepBbiu позиционированный текст
Рис. 666. Использование свойства i-index позволяет изменить естественный порядок следования элементов в тексте HTML-документа
При позиционировании элементов может оказаться, что размеры элемента превосходят размеры фрагмента (отводимой области, заданной в нашем примере тегом ). Например, текст или картинка не помещаются полностью в прямоугольник, выделенный для них. На этот случай имеется свойство overwlow (переполнение). Свойство overflow может иметь три значения:
- nоnе (ничего) - если элемент и выйдет за пределы фрагмента (отведенного для него места), он все равно будет показан;
- clip - выступающие за границы фрагмента части элемента будут обрезаны;
- scroll - будет использована прокрутка.
В следующем примере используется свойство overflow для создания механизма прокрутки первого текста.
Позиционирование
riepBbiM позиционированный текст
Второй позиционированный текст
Рис. 667. Механизм прокрутки текста, реализованный с помощью свойства overflow
Конечно, неказистые страницы с предыдущих рисунков создавались лишь с целью продемонстрировать возможности языка по позиционированию элементов. Вы сами решите, какие средства и для чего будете использовать на своей Web-странице.
С помощью свойств позиционирования нетрудно создавать для надписей эффект трехмерности. Идея состоит в том, чтобы вывести одинаковые по содержанию тексты слегка сдвинутыми друг относительно друга и окрашенными в различные цвета. Попробуйте в качестве упражнения написать соответствующую программу. На рисунке показано примерно то, что должно получиться. Ниже рисунка приведен один из возможных вариантов программы, которая создает «трехмерную» надпись.
Рис. 668. Пример создания трехмерного текста с помощью CSS
3d эффект
P (font-family: "sans-serif"; font-size: 96, -color: red)
P. highlight (color: silver }
P. shadow (color: darkred}
Объемный текст"
Oбъeмный
текст
Объемный текст
Обратите внимание, что этот способ создания эффектных заголовков значительно экономнее, чем использование графических файлов с аналогичным содержанием.
В CSS есть свойства, которые отвечают за позиционирование элемента. То есть, ему отступы будут заданы от края документа или относительно родительского элемента? Для этого используется свойство position. Оно имеет несколько значений, о них и напишу.
Положение зависит от того, есть ли родительские элементы с таким же свойством (position absolute relative fixed):
1. если нет, то положение будет определяться относительно левого верхнего угла окна
2. если есть, то будет положение будет определяться относительно нихfixed Чёткое фиксированное положение элемента. Его координаты будут привязаны к X,Y сторонам браузера. При скролле страницы элементы будут оставаться на своём месте.relative Данное значение определяет положение элемента уже относительно его исходного места.static Значение устанавливает элемент так, как он должен располагаться в обычном состояние относительно других элементов.Располагаем элементы Установив значения absolute relative fixed элементом возможно манипулировать, перемещая его относительно других элементов. Делается это свойствами top, right, bottom, left. Значения данных свойств устанавливают на сколько сместится элемент относительного текущего положения.
#wrapper {
position: relative;
bottom: 15px; /* смещен на 15px от низа */
left: 30px; /* смещен на 30px слева */
}
При этом можно указывать и отрицательные значения.
#wale {
position: relative;
right: -10px; /* смещен на -10px справа (10px слева) */
}
position
.layer1 {
position: relative; /* Относительное позиционирование */
background: #f0f0f0; /* Цвет фона */
height: 200px; /* Высота блока */
}
.layer2 {
position: absolute; /* Абсолютное позиционирование */
bottom: 15px; /* Положение от нижнего края */
right: 15px; /* Положение от правого края */
line-height: 1px;
}
Ну и уже по обыкновению смотрим пример проработки) Для наглядности попробуйте изменить размеры окна браузера.
Свойство position
имеет следующие значения
static relative absolute fixed
Только совместно с ним применяются свойства (искл. position: static;)
top bottom right left
Одновременно могут присутствовать
margin transform float (искл. position: absolute; и position: fixed;)
.primer { border: 4px solid #456; width: 200px; background: #fff; position: fixed; position: static; position: relative; position: absolute; margin: 15px -15px -15px 15px; -moz-transform: translate(15px, 15px); -webkit-transform: translate(15px, 15px); -o-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px); z-index: 100; float: left; top: 15px; bottom: 15px; right: 15px; left: 15px; } .primer1 { border: 4px solid #087e11; width: 200px; background: #e1e1e1; z-index: 200; position: relative; }
Добавить пустой тег перед div с class="primer" - .
ВведениеЭлементы на веб-странице занимают определённое пространство. По аналогии с корабликами в игре "Морской бой". Между кораблями должны быть пустые клеточки - margin.
Для того, чтобы один элемент поместить поверх другого, нужно задать отрицательное значение для margin. Но тогда содержимое тегов будет накладываться друг на друга. С помощью свойств position и они как бы приподнимаются на уровень 2.
В естественном порядке нижние теги в коде показаны над верхними. Благодаря z-index на уровне 2 можно самим определить видимый элемент.
Статического позиционирование - position: static;position: static используется по умолчанию и отменяет действие relative, absolute и fixed. Значения свойств top, bottom, right, left игнорируются. При отсутствии transform не учитывается и z-index.
z-index: 3; } .svetlyi2 { background-color: #fff; width: 250px; z-index: 2; margin: 0px -30px -30px 30px; } .svetlyi3 { background-color: #f5f5dc; width: 250px; z-index: 1; } А Б В
Относительное позиционирование - position: relative;Тому блоку, которому мы присвоим position: relative будет отдан приоритет. Содержимое нижнего элемента скрывается.
margin: 0px -60px -30px 60px; position: relative;
А
Б
В
Для того, чтобы расположить блок Б поверх В, но ниже А, недостаточно присвоить и ему position: relative, поскольку в коде он стоит ниже блока А, а значит будет его перекрывать.
.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; position: relative;
}
.svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: relative;
}
.svetlyi3 { background-color: #f5f5dc; width: 250px; }
А
Б
В
Нужно задать для элемента Б ещё и z-index меньше, чем у блока А.
.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; }
.svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; }
.svetlyi3 { background-color: #f5f5dc; width: 250px; }
А
Б
В
Вместо margin при относительном позиционировании иногда лучше использовать свойства top, bottom, right, left. Точкой отсчёта для них является исходное положение элемента. При этом блок Б продолжает располагаться так, словно блок А находится на прежнем месте - он оставляет для него пустое пространство. Поэтому можно не колдовать с пустым div ().
.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; top: 30px; left: 60px; position: relative; z-index: 2;
}
.svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: relative; z-index: 1;
}
.svetlyi3 { background-color: #f5f5dc; width: 250px; }
А
Б
В
Полная аналогия со свойством
.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; transform: translate(60px, 30px); z-index: 2; } .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: relative; z-index: 1; } .svetlyi3 { background-color: #f5f5dc; width: 250px; } А Б В
Для встроенных элементовВстроенные элементы margin не смещает вниз и вверх (). Только top, bottom
top: 30px; position: relative;
БАБ
или
.temnyi { background-color: #666; width:500px; font-size: 250%;}
.svetlyi1 { background-color: #ccc; width: 250px; transform: translate(0px, 30px);
}
.svetlyi2 { background-color: #fff; width: 250px; }
БАБ
Б А Б
Абсолютное и фиксированное позиционированиеКазалось бы, что блок с position: absolute должен находиться выше position: relative, но это нет так, тут действует естественный порядок. А значит z-index позволит между ними выбрать приоритетный элемент.
.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; position: relative; } .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: absolute; } .svetlyi3 { background-color: #f5f5dc; width: 250px; } А Б В
Блок В игнорирует исходное положение блока Б, поскольку при position: absolute и position: fixed элемент перестаёт влиять на соседние теги ни посредством своей ширины/высоты, ни посредством float: left.
.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; position: relative; z-index: 2; } .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: absolute; z-index: 1; } .svetlyi3 { background-color: #f5f5dc; width: 250px; margin-top: 20px; } А Б В
Итоговая таблица| отличительные свойства | position: static; | position: relative; transform: translate(); | position: absolute; | position: fixed; |
| наложение | элементы лучше не помещать друг на друга | элементы имеет приоритет видимости над static. Другие значения равнозначны. Видимым будет тот, кто ниже находится в коде, либо обладает большим значением z-index | ||
| точка отсчёта top, right, bottom и left | игнорируются | исходное положение элемента | край родительского элемента | край окна браузера |
| элементы вокруг | учитывают текущее положение элемента | учитывают исходное положение элемента | игнорируют положение элемента | |
| width: 100%; это ширина | элемента (для встроенного)/родительского элемента (для блочного) | родительского элемента с position не в значении static | окна браузера | |
| при прокрутки страницы элемент | перемещается | "прилипает" к заданному месту окна браузера | ||
А теперь для закрепления материала пощёлкайте по кнопкам в начале статьи, подумайте почему произошли именно такие изменения.
Влад Мержевич
Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное. В зависимости от типа, который устанавливается через свойство position , изменяется и система координат.
Благодаря комбинации свойств position , left , top , right и bottom элемент можно накладывать один на другой, выводить в точке с определёнными координатами, фиксировать в указанном месте, определить положение одного элемента относительно другого и др. Подобно другим свойствам CSS управление позиционированием доступно через скрипты. Таким образом, можно динамически изменять положение элементов без перезагрузки страницы, создавая анимацию и различные эффекты.
Нормальное позиционированиеЕсли для элемента свойство position не задано или его значение static , элемент выводится в потоке документа как обычно. Иными словами, элементы отображаются на странице в том порядке, как они идут в исходном коде HTML.
Свойства left , top , right , bottom если определены, игнорируются.
Абсолютное позиционированиеПри абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Задать этот тип можно через значение absolute свойства position . Координаты указываются относительно краёв окна браузера, называемого «видимой областью» (рис. 3.42).
Рис. 3.42. Значения свойств left, right, top и bottom при абсолютном позиционировании
Для режима характерны следующие особенности.
- Ширина слоя, если она не задана явно, равна ширине контента плюс значения полей, границ и отступов.
- Слой не меняет своё исходное положение, если у него нет свойств right , left , top и bottom .
- Свойства left и top имеют более высокий приоритет по сравнению с right и bottom . Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom .
- Если left задать отрицательное значение, то слой уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. Это один из способов спрятать элемент от просмотра. То же относится и к свойству top , только слой уйдёт за верхний край.
- Если left задать значение больше ширины видимой области или указать right с отрицательным значением, появится горизонтальная полоса прокрутки. Подобное правило работает и с top , только речь пойдёт о вертикальной полосе прокрутки.
- Одновременно указанные свойства left и right формируют ширину слоя, но только если width не указано. Стоит добавить свойство width и значение right будет проигнорировано. Аналогично произойдёт и с высотой слоя, только уже участвуют свойства top , bottom и height .
- Элемент с абсолютным позиционированием перемещается вместе с документом при его прокрутке.
Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов необходимо назначить свойство overflow со значением auto . Тогда при превышении контентом высоты видимой области появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left , right для ширины и top , bottom для высоты (пример 3.31).
Пример 3.31. Создание аналога фреймов
Абсолютное позиционирование body { margin: 0; } #sidebar, #content { position: absolute; } #sidebar, #content { overflow: auto; padding: 10px; } #header { height: 80px; /* Высота слоя */ background: #FEDFC0; border-bottom: 2px solid #7B5427; } #header h1 { padding: 20px; margin: 0; } #sidebar { width: 150px; background: #ECF5E4; border-right: 1px solid #231F20; top: 82px; /* Расстояние от верхнего края */ bottom: 0; /* Расстояние снизу */ } #content { top: 82px; /* Расстояние от верхнего края */ left: 170px; /* Расстояние от левого края */ bottom: 0; right: 0; } Плов народов мира
Плов по-фергански
Плов узбекский
Плов сибирский
Плов итальянский
Плов эстонский
Плов по-американски
Плов по-индейски
Плов по-ферганскиПоложить в казан нарезанное кусочками мясо и поджарить его до образования корочки. Нашинкованный кольцами лук жарить вместе с мясом до красноватого цвета, затем добавить морковь, нарезанную соломкой. Положить половину соли, всё перемешать и жарить, пока морковь не приобретёт золотисто-коричневый цвет. После этого налить половину необходимого количества воды и дать закипеть.
Засыпать ровным слоем рис, усилить огонь и тотчас налить воду, чтобы она накрыла рис на 1–1,5 см. Как только вода выпарится, плов при помощи шумовки собрать к середине горкой, проколоть палочкой в нескольких местах так, чтобы вода, находящаяся на поверхности, прошла на дно. Затем накрыть плов и дать ему упреть 20–25 мин.
Тщательно перемешайте готовый плов, переложите в большое блюдо, сверху разложите мясо.
Результат данного примера показан на рис. 3.43. Слой header выводится в потоке как обычно, а для слоёв sidebar и content установлено абсолютное позиционирование.
Рис. 3.43. Применение абсолютного позиционирования
В браузере IE6 для абсолютно позиционированных элементов нельзя одновременно задать свойства left , right и top , bottom .
Абсолютное позиционирование также применяется для создания различных эффектов, например, всплывающей подсказки к фотографиям. В отличие от атрибута title
тега
который также выводит текст подсказки, через стили можно управлять видом текста выводимого с помощью скрипта.
Для начала создадим пустой слой с идентификатором floatTip и определим его стиль. Обязательными должны быть три стилевых свойства - position со значением absolute , display со значением none скрывает слой и width задаёт ширину слоя с подсказкой. Остальные свойства используются по желанию разработчика и предназначены для изменения оформления слоя (пример 3.32).
Пример 3.32. Стиль для всплывающей подсказки
#floatTip { position: absolute; /* Абсолютное позиционирование */ width: 250px; /* Ширина блока */ display: none; /* Прячем от показа */ border: 1px solid #000; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ font-family: sans-serif; /* Рубленый шрифт */ font-size: 9pt; /* Размер шрифта */ color: #333; /* Цвет текста */ background: #ECF5E4; /* Цвет фона */ }
Сам скрипт состоит из двух функций - moveTip() отслеживает движение мыши и в соответствии с координатами курсора меняет положение слоя, и toolTip() управляет видимостью слоя и выводит в нём желаемый текст (пример 3.33).
Пример 3.33. Скрипт для вывода слоя
Document.onmousemove = moveTip; function moveTip(e) { floatTipStyle = document.getElementById("floatTip").style; w = 250; // Ширина слоя // Для браузера IE if (document.all) { x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; // Для остальных браузеров } else { x = e.pageX; // Координата X курсора y = e.pageY; // Координата Y курсора } // Показывать слой справа от курсора if ((x + w + 10) < document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }
Для удобства и универсальности скрипт следует вынести в отдельный файл и подключать его через атрибут src тега . Окончательный код показан в примере 3.34.
Пример 3.34. Создание всплывающей подсказки
Всплывающая подсказка #floatTip { position: absolute; width: 250px; display: none; border: 1px solid #000; padding: 5px; font-family: sans-serif; font-size: 9pt; color: #333; background: #ECF5E4; opacity: 0.85; /* Прозрачность слоя */ }
" +
"Объектив: Canon EF 24-105 f/4L IS USM
" +
"Вспышка: Canon Speedlite 580 EX
" +
"Выдержка: 1/125
Диафрагма: 5.6")" onmouseout="toolTip()" />
Результат данного примера показан на рис. 3.44. Обратите внимание, что переносы текста при вызове функции toolTip() сделаны для удобства восприятия и имеют синтаксис JavaScript. В Safari скрипт иногда не работает при переносе текста, в этом случае текст следует записать в одну строку. К стилям добавлено свойство CSS3 opacity , которое добавляет для слоя небольшую прозрачность. В IE до версии 9.0 это свойство не поддерживается.
Рис. 3.44. Всплывающая подсказка, выводимая с помощью JavaScript
Фиксированное положениеФиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left , top , right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Ещё одна разница от absolute заключается в том, что при выходе фиксированного слоя за пределы видимой области справа или снизу от неё, не возникает полос прокрутки.
Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на странице и всегда видны посетителю. В примере 3.35 показано добавление подвала, который остаётся на одном месте независимо от объёма информации на сайте.
Пример 3.35. Фиксированный подвал
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Фиксированный подвал BODY { margin-bottom: 50px; } #footer { position: fixed; /* Фиксированное положение */ left: 0; bottom: 0; /* Левый нижний угол */ padding: 10px; /* Поля вокруг текста */ background: #39b54a; /* Цвет фона */ color: #fff; /* Цвет текста */ width: 100%; /* Ширина слоя */ } Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Автор не гарантируют вашей безопасности при их использовании и снимает с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное! Влад Мержевич
Результат примера показан на рис. 3.45. Поскольку фиксированный подвал накладывается на текст и скрывает его, добавлен отступ снизу для селектора BODY . Браузер IE6 не поддерживает значение fixed , поэтому в нём данный пример будет работать некорректно.
Рис. 3.45. Подвал внизу страницы
Относительное позиционированиеЕсли задать значение relative свойства position , то положение элемента устанавливается относительно его исходного места. Добавление свойств left , top , right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное - сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз (рис. 3.46), отрицательное - сдвиг вверх.
Рис. 3.46. Значения свойств left и top при относительном позиционировании
Свойства bottom и right производят обратный эффект. При положительном значении right сдвигает элемент влево от его правого края, при отрицательном - сдвигает вправо (рис. 3.47). При положительном значении bottom элемент поднимается вверх, при отрицательном опускается вниз.
Рис. 3.47. Значения свойств right и bottom при относительном позиционировании
Для относительного позиционирования характерны следующие особенности.
- Этот тип позиционирования не применим к элементам таблицы вроде ячеек, строк, колонок и др.
- При смещении элемента относительно исходного положения, место, которое занимал элемент, остаётся пустым и не заполняется ниже или вышележащими элементами.
В примере 3.36 показан сдвиг текста заголовка вниз для придания ему особого стиля написания.
Пример 3.36. Заголовок текста
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Заголовок H1 { font: bold 2em Arial, Tahome, sans-serif; /* Параметры шрифта */ color: #fff; background: #375D4C; padding: 0 10px; } H1 SPAN { position: relative; /* Относительное позиционирование */ top: 0.3em; /* Сдвигаем вниз */ } Аз и буки шрифтовой науки
Шрифт это средство выражения дизайна, а не какого-то банального чтения.
Результат данного примера показан на рис. 3.48.
Рис. 3.48. Сдвиг текста относительно исходного положения
Вложенные слоиОбычно относительное позиционирование само по себе применяется не часто, поскольку есть ряд свойств выполняющих фактически ту же роль, к примеру, тот же margin . Но сочетание разных типов позиционирования для вложенных слоёв является одним из удобных и практичных приёмов вёрстки. Если для родительского элемента задать relative , а для дочернего absolute , то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя (рис. 3.49).
Рис. 3.49. Значения свойств left, right, top и bottom во вложенных слоях
Отсчёт координат ведётся от внутреннего края границы, значения полей не учитываются. В следующем примере текст располагается в правом нижнем углу слоя возле границы, игнорируя свойство padding .
Текст
