Разные типы позиционирования в CSS

В сегодняшнем уроке Вы узнаете о разных типах позиционирования в CSS.

Многие начинающие вебмастера знают о существовании разных типов позиционирования для представления данных на веб страничках.

Всего существует 4 типа позиционирования absolute, fixed, relative и static. Они существенно отличаются друг от друга. Каждый из них очень полезен и при правильном использовании Вы всегда получите желаемый результат.

При работе с позиционированием важно понять одну концепцию: все элементы на странице - это блоки. Грубо говоря, прямоугольники из пикселей. Это означает, что каждому блоку можно присвоить и высоту, и ширину в пикселях. Блоки (элементы) бывают также инлайновыми. Они тоже в виде прямоугольников, но лежат на странице немного иначе. Они выстраиваются друг за другом по-горизонтали.

Теперь, когда мы для себя решили, что каждый элемент на странице это блок, мы можем поговорить о типах позиционирования и как они помогут нам добиться нужного результата (т.е. разместить любой блок там, где нам необходимо).

- STATIC. Это значение по умолчанию для любого элемента на странице. Это самый простой тип и практически ничего не означает. Все выглядит как должно выглядеть.

- RELATIVE. Этот тип позиционирования наиболее трудный и неправильно используемый. Если ВЫ присвоете элементу position: relative;, но не придадите каких-либо других атрибутов (top, left, bottom или right), тогда ничего не изменится. Все останется на своих местах (также как и первым типом позиционирования). Но если Вы добавите атрибуты (например, top: 10px), тогда элемент сместится на 10 пикселей вниз от того места, где он обычно располагался. Это очень полезно при выравнивании элементов формы в один ряд.

Кроме этого, есть еще две вещи, которые происходят при употреблении position: relative. Во-первых, это возможность использовать на этом элементе z-index. С помощью этого свойства можно добиться интересных решений для любого сайта. Во-вторых, Все дочерние элементы относительно позиционированого элемента могут быть позиционированы абсолютно. Это позволяет решать практически любые задачи по оформлению страничек. Если не совсем понятна суть, тогда достаточно взглянуть на изображения ниже:

- ABSOLUTE. Очень мощный тип позиционирования, который позволяет поместить любой элемент в любом месте страницы. Для этого используются аргументы top, left, bottom и right. Самое главное запомнить, что элементы с абсолютным позиционированием как бы вырваны из структуры страницы. На элемент с таким типом позиционирования не влияют другие элементы, и он также не влияет на них. Это необходимо всегда держать в уме при создании сайтов. Неправильное или частое использование такого типа может ограничить гибкость Вашего сайта.

- FIXED. Этот тип позиционирования очень редкий. Элемент с таким типом позиционируется относительно к окну просмотра, то есть браузеру. При скролле, такой элемент будет оставаться всегда на том же месте. Взгляните на этот сайт. При прокрутке вниз с левой стороны меню остается на одном и том же месте. Этот пример одновременно показывает и плюсы, и минусы такого типа позиционирования. Преимуществом является то, что навигация всегда на виду, и вообще это интересный эффект для посетителей. Минусы возможно не видны с первого взгляда. Если зайти на эту страницу с ноутбука с маленьким экраном, например, тогда панель с навигацией будет видна не полностью (и никак не удасться ее просмотреть, так как не будет скролла). В общем, это классный эффект, но требует тщательного тестирования

На сегодня все! Всем доброго времени суток!!

P.S. Если что-либо непонятно, смело спрашивайте в комментариях! Попробую ответить на все Ваши вопросы по теме.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.css-tricks.com
Перевел: Максим Шкурупий
Урок создан: 2 Сентября 2009
Просмотров: 48328
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^