Выше мы говорили о том, что позиционировать элементы страницы можно путем использования таблиц. Но это же можно делать и с помощью стилей. Среди параметров стиля имеются специальные свойства для позиционирования:
Конечно, при использовании этих трех свойств не создается эффект трехмерного
пространства, но это уже нечто большее, чем плоская поверхность. В этом
случае говорят о 2,5-мерном пространстве.
Кроме свойств-координат, нам понадобится свойство роsition
,
которое в сочетании со свойствами left
и
top
позволяет устанавливать элементы в определенные
позиции окна. Свойство position может принимать три значения:
Следующий пример показывает использование свойства z-index . Хотя в тексте программы картинка описана выше остальных элементов, за счет присвоения ей индекса с большим номером происходит перемещение ее поверх первого текста. Таким образом, использование свойства z-index освобождает от пут естественного порядка упоминания элементов в тексте HTML-программы.
Рис. 666. Использование
свойства i-index позволяет изменить естественный порядок следования элементов
в тексте HTML-документа
При позиционировании элементов может оказаться, что размеры элемента превосходят
размеры фрагмента (отводимой области, заданной в нашем примере тегом В следующем примере используется свойство overflow
для создания механизма
прокрутки первого текста. Рис. 667. Механизм прокрутки текста,
реализованный с помощью свойства overflow
Конечно, неказистые страницы с предыдущих рисунков создавались лишь
с целью продемонстрировать возможности языка по позиционированию элементов.
Вы сами решите, какие средства и для чего будете использовать на своей
Web-странице. С помощью свойств позиционирования нетрудно создавать для надписей эффект
трехмерности. Идея состоит в том, чтобы вывести одинаковые по содержанию
тексты слегка сдвинутыми друг относительно друга и окрашенными в различные
цвета. Попробуйте в качестве упражнения написать соответствующую программу.
На рисунке показано примерно то, что должно получиться. Ниже рисунка приведен
один из возможных вариантов программы, которая создает «трехмерную» надпись. Рис. 668. Пример создания трехмерного
текста с помощью CSS
Объемный текст"Р> Oбъeмный
текстР> Объемный текст Р> Обратите внимание, что этот способ создания эффектных заголовков значительно
экономнее, чем использование графических файлов с аналогичным содержанием. Позиционирование блоков css
один из важнейших этапов верстки, потому что именно это влияет на адаптивность сайта или на возможность её реализации в дальнейшем (если на данный момент не требуется), а так же оказывает значительное влияние на дальнейшее масштабирование сайта. Не редки случаи когда «горе-верстальщики» делают такую верстку, что в итоге её проще выкинуть чем что то изменить, но при это она может выглядеть полностью в соответствии с макетом. Данная ситуация возникает из за не понимания где и когда использовать тот или иной тип позиционирования. Сегодня мы попробуем разобраться в данном вопросе. И так, в css существует свойство position.
Данное свойство может принимать 5 значений, но мы рассмотрим 4 основных: Первый, в нашем списке, способ позиционирование — это абсолютное. При назначении данного свойства, блок становится самостоятельно единицей и остальные элементы страницы не влияют на его расположение, а так же и он не влияет на другие элементы. Размер блока определяется свойствами width и height, а расположение на странице — свойствами top. left, right и bottom эти параметры задают отступы от верхнего, левого, правого и нижнего края. Если у блока нет родительского элемента, а так же если позиционирование родительского элемента отлично от static, то top, left, bottom, right свойства задают отступы от начала страницы, в противном случае от краев родительского элемента. Чаще всего данный вид позиционирования используется, когда блок нужно прижать к правому или нижнем краю. Рассмотрим такой макет. Для удобства блоки были выделены разноцветно рамкой. Разметка будет выглядеть следующим образом: XHTML
Relation
{
position: relative;
}
.yellow
{
position: absolute;
right: 10px;
bottom: 10px;
} Relation
position
:
relative
;
Yellow
position
:
absolute
;
right
:
10px
;
bottom
:
10px
;
В данном примере мы воспользовались свойствами right и bottom для того что бы задать отступ от правого и нижнего края. Данные значения свойств равносильны значениям top: Высота элемента — 10px и left: Ширина элемента — 10px. Так же абсолютное позиционирование иногда применяется когда необходимо сделать «наезд» одного элемента на другой. Самый распространенный вид позиционирования которое встречается на каждой странице и как правило задан для большинства элементов — статичное, в css пишется как static. Для большинства HTML тегов данное значение определяется по умолчанию т.е. если position явно не задан, то значение будет static. При таком расположении элементы выстраиваются друг под другом и координаты в окне каждого элемента зависит от ближайших элементов с position: static или position: relative. Свойства top, left, right, bottom не сработают при таком позиционировании, изменение расположение происходит за счет свойства margin. Данный вид позиционирования очень похож на статичный за исключением того что, расположение элемента можно изменять свойствами top, left, right, bottom и margin. Фиксированное позиционирование по особенностям задания координат похоже на абсолютное, но расположение высчитывается не относительно HTML страницы, а относительно окна браузера, т.е. при свойстве top: 10px, вы зададите отступ сверху равный 10px ОТ ОКНА БРАУЗЕРА
и вне зависимости от того на каком уровне прокрутки страницы вы находитесь, данный элемент всегда будет следовать с вашим экраном. Обычно используется для элементов навигации, что бы у пользователя была всегда на виду важная информация или ссылки на интересные страницы. Необычное расположение! CSS свойства позиционирования позволяют вам позиционировать элемент. Также они могут расположить элемент позади
другого, и указать, что должно произойти, когда содержимое элемента слишком большое. Элементы могут располагаться, используя свойства top (сверху), bottom (снизу), left (слева), и right (справа).
Однако, эти свойства не будут работать, пока не установлено свойство position.
Также они работают по-разному, в зависимости от метода позиционирования. Существует четыре различных метода позиционирования. HTML элементы позиционируются статически по умолчанию. Статически позиционированный элемент
всегда располагается в соответствии со стандартным потоком элементов на странице. Статически расположенные элементы не подвергаются воздействию свойств top, bottom, left, и
right. Элемент с фиксированным положением позиционирован относительно окна браузера. Он не будет двигаться, даже если окно прокручивается: Замечание:
IE7 и IE8 поддерживают значение fixed только если указан тип документа!DOCTYPE. Фиксированно расположенные элементы удаляются из нормального потока. Документ и другие элементы
ведут себя так, будто фиксированно расположенный элемент не существует. Зафиксированные элементы могут перекрывать другие элементы. Относительно позиционированный элемент располагается относительно по отношению к его обычной позиции. Относительно позиционированные элементы часто используются в качестве контейнеров для абсолютно позиционированных
элементов. Абсолютно позиционированный элемент располагается относительно первого родительского элемента, который
позиционирован иначе, чем статически.
Если такого элемента не найдено, за родительский элемент принимается : Абсолютно позиционированные элементы удаляются из стандартного потока элементов.
Документ и другие элементы ведут себя так, будто абсолютно позиционированный элемент не существует. Абсолютно расположенные элементы могут перекрывать другие элементы. Когда элементы расположены вне стандартного потока, они могут перекрывать другие элементы. Свойство z-index указывает вертикальный порядок элемента (какой элемент должен быть помещен спереди, или сзади других элементов). Элемент может иметь положительный или отрицательный вертикальный порядок: Элемент с большим вертикальным порядком всегда находится впереди элементы с меньшим вертикальным порядком. Замечание:
Если два позиционированных элементы перекрываются и не указан вертикальный порядок,
элемент расположенный позже в HTML коде будет показан сверху. Установка формы элемента Как показать переполненный элемент, используя прокрутку Как заставить браузер автоматически управлять переполнением Изменение курсора Число в столбце "CSS" указывает, в какой версии CSS
определено свойство (CSS1 или CSS2). В наши дни веб-разработчики могут строить сложные раскладки веб-страниц, используя различные техники CSS. Некоторые из этих техник имеют длинную историю (флоаты), другие (флексбокс) достигли популярности в последние годы. В этой статье мы внимательно рассмотрим некоторые малоизвестные вещи, касающиеся CSS-позиционирования . Перед тем как начать, давайте кратко вспомним основы различных типов позиционирования. Свойство CSS position определяет тип позиционирования элемента. static это значение свойства позиционирования по умолчанию. Мы сообщаем, что этот элемент не использует позиционирование - позиционирование применяется, только если задать тип позиционирования, отличный от дефолтного. Для этого надо свойству position задать одно из следующих значений: И только после задания позиционирования, можно использовать свойства, смещающие элемент: Надо учитывать, что если у элемента задано свойство position в значении absolute или fixed , то он является абсолютно позиционированным элементом. Также у позиционированных элементов начинает работать свойство z-index , определяющее порядок наложения. Теперь быстро рассмотрим три базовых различия между доступными типами позиционирования: Подробнее это можно рассмотреть в демо: Примечание: позиционирование “приклеенных элементов” до сих пор является экспериментальной технологией с ограниченной поддержкой в браузерах . Конечно, при желании вы можете использовать полифилл , чтобы добавить этот функционал в браузер, но с учетом малой распространенности это свойство в статье обсуждаться не будет. Я уверен, что большинство знает принцип работы абсолютного позиционирования. Однако новичков многое в нем может смутить. Поэтому я решил начать с него при описании малоизвестные особенностей позиционирования. Итак, абсолютно позиционированный элемент смещается относительно своего ближайшего спозиционированного предка. Конечно, это работает, если у кого-либо из предков position отличается от static - если у элемента нет спозиционированных предков, он смещается относительно зоны видимости. Это демонстрируется следующим примером: В этом демо зеленый блок изначально спозиционирован абсолютно с нулевыми отступами bottom:0 и left:0 , его предку (красному блоку) позиционирование не задавалось вообще. Однако, мы относительно позиционировали внешнюю обертку (элемент с классом jumbotron). Отметьте, как меняется позиционирование зеленого блока при изменении типа позиционирования его предков. Если мы применим к плавающему элементу абсолютное или фиксированное позиционирование, свойство float получит значение none . С другой стороны, если мы зададим относительное позиционирование, элемент останется плавающим. Взгляните на соответствующее демо: В этом примере, мы определяем два разных элемента, уплывающих вправо. Отметьте, что когда красный блок становится абсолютно позиционированным, он игнорирует значение свойства float , в то время как относительно спозиционированный зеленый блок сохраняет значение float . Строчный элемент с абсолютным или фиксированным позиционированием приобретает свойства блочного элемента. Подробнее конвертация строчных элементов в блочные описана в таблице . В данном случае мы создали два разных элемента. Первый (зеленый блок) это блочный элемент, а второй (красный блок) - строчный. Изначально виден только зеленый блок. Красный блок не виден потому, что заданные ему свойства width и height работают только с блочными и строчно-блочными элементами, а так как в нем нет контента, у него нет никаких размеров. При задании красному блоку абсолютного или фиксированного позиционирования, он становится блочным и заданные в нем размеры блока начинают действовать. По умолчанию, когда у два вертикальных внешних отступа соприкасаются, они объединяются в один, равный максимальному из них. Это называется схлопывание внешних отступов . Поведение абсолютно позиционированных элементов здесь схоже с плавающими элементами - их отступы не объединяются с соседними. В этом демо элементу задан отступ в 20 пикселей. Его отступ коллапсирует с отступом родительского элемента, также равного 20 пикселям. Как видите, только при абсолютном позиционировании схлопывания не происходит. Но как мы можем предотвратить схлопывание отступов? Нам нужно поместить между ними какой-либо разделитель. Это может быть внутренний отступ (padding) или граница (border), их можно применять как к родительскому, так и к дочернему элементу. Другой вариант - добавить клирфикс к родительскому элементу. Использовали ли вы когда-либо проценты вместо пикселей для позиционирования элементов? Если ответ да, то вы знаете, что смещение элемента зависит от выбранных единиц исчисления (пикселей или процентов). Это немного смущает, правда? Итак, сначала посмотрим, что говорит спецификация об смещении в процентах: Смещение в процентах от ширины (для left и right) или высоты (top или bottom) родительского блока. Для приклеенных элементов, смещение рассчитывается в процентах от ширины (для left и right) или высоты (top или bottom) потока. Допустимы отрицательные значения. Как было сказано, при задании смещения в процентах, позиция элемента зависит от ширины и высоты его родителя. Демо показывает эту разницу: В этом примере для смещения используются пиксели и проценты. Конечно, при задании смещения в пикселях элемент сдвигается туда, куда надо. А если мы выберем проценты для смещения, результат будет зависеть от размеров родительского элемента. Вот визуализация показывающая, как рассчитывается новая позиция: Примечание: как вы, наверное, знаете, свойство transform (вместе с различными функциями translate) также позволяет изменить позицию элемента. Но в этом случае при использовании процентов расчет будет происходить на основе размер самого элемента, а не его родителя. Я надеюсь, что эта статья помогла вам лучше понять позиционирование в CSS и разъяснила основные сложности. Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о CSS-свойствах position
и float
. По умолчанию все элементы на странице имеют статическое позиционирование (position: static), это означает, что элемент не позиционирован, и появляется в документе на своем обычном месте, то есть в том же порядке, как и в html-разметке. Нет необходимости специально назначать это свойство какому-либо элементу, если только вам не требуется изменить ранее установленное позиционирование на дефолтное.
#content{
position: static;
}
Относительное позиционирование (position: relative) позволяет вам использовать свойства: top, bottom, left и right, для расположения элемента относительно того места, где бы он появился при обычном позиционировании. Давайте переместим #content на 20 пикселей вниз, и на 40 пикселей влево:
#content{
position: relative;
top: 20px;
left: -40px;
}
Обратите внимание, что на том месте, где бы должен был находится наш блок #content, теперь образовалось пустое пространство. Следующий за блоком #content, блок #footer не переместился ниже, потому что, #content по-прежнему занимает свое место в документе, несмотря на то, что мы передвинули его. На данном этапе может показаться, что относительное позиционирование не так уж и полезно, но, не спешите с выводами, далее в статье, вы узнаете, для чего его можно использовать. При абсолютном позиционировании (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. И на этом этапе, относительное позиционирование вновь вступает в игру. Фиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.
#div-1a {
position:fixed;
top:0;
right:0;
width:200px;
}
В IE с position: fixed не все так гладко, как бы нам хотелось, но существует множество способов обойти эти ограничения. Назначив блоку #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. А сейчас у вас должен был возникнуть вопрос: “А куда же делись остальные элементы из нашего примера?”. Они скрылись под абсолютно расположенными блоками. К счастью, есть возможность это исправить. Одно из решений – задать фиксированную высоту контейнеру, содержащему колонки.
#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;
}
Решение не очень подходящее, поскольку мы никогда не знаем заранее, какого размера текст, будет расположен в колонках, и какой шрифт будет использован. Для колонок с переменной высотой, абсолютное позиционирование не подходит, поэтому давайте рассмотрим другой вариант. Назначив блоку 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;
}
Но теперь у нас появилась другая проблема – колонки выходят за пределы родительского контейнера, тем самым ломая всю верстку. Эта самая распространенная проблема начинающих верстальщиков, хотя решается она довольно просто. Чистку флоатов можно делать двумя способами. Если после колонок идет еще один блок, достаточно назначить ему clear: both.
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}
Или же назначить родительскому контейнеру свойство overflow: hidden
#content {
overflow:hidden;
}
В любом случае, результат будет один и тот же. Сегодня были рассмотрены только базовые приемы позиционирования, и самые простые примеры. Также, в помощь начинающим верстальщикам я всегда рекомендую цикл статей Ивана Сагалаева, которые в свое время мне очень помогли.
<НЕАD>
nepBbiu позиционированный текстН1>
Н1>
<НЕАD><ТIТLЕ>ПозиционированиеТIТLЕ>НЕАD>
riepBbiM позиционированный текст
Н1>
Второй позиционированный текстН1>
height:100;margin: top: 10">
Абсолютное позиционирование блоков (absolute)
Статичное позиционирование (static)
Относительно позиционирование (relative)
Фиксированное позиционирование (fixed)
Решите, какой элемент отображать спереди!
Элементы могут перекрываться!
Позиционирование
Статическое Позиционирование
Фиксированное Позиционирование
Относительное Позиционирование
Абсолютное Позиционирование
Перекрытие Элементов
Еще примеры
Этот пример демонстрирует как задать форму элемента. Элемент обрезается по этой форме, а затем отображается.
Этот пример демонстрирует как установить свойство overflow, чтобы создать полосу прокрутки, когда содержимое
элемента слишком большое, чтобы уместиться в указанной области.
Этот пример демонстрирует как заставить браузер автоматически управлять переполнением.
Этот пример демонстрирует как изменить курсор.Все CSS Свойства Позиционирования
Свойство
Описание
Значения
CSS
Обзор доступных способов позиционирования
Опции для позиционирования
Различия между основными способами позиционирования
Позиционирование элементов с абсолютным типом позиционирования
Абсолютно позиционированные элементы игнорируют свойство float
Абсолютно позиционированные строчные элементы становятся блочными
У абсолютно позиционированных элементов нет схлопывания внешних отступов
Позиционирование элементов с пикселями и процентами
Заключение
1. position: static
2. position:relative
3. position: absolute
4. position: fixed
5. position:relative + position:absolute
6. Две колонки
7. Две колонки с фиксированной высотой
8. Float
9. “Плавающие” колонки
10. Очистка float
Заключение