Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

CSS → CSS позиционирование работ

CSS позиционирование работ


Демо: смотреть
Скачать: demo.zip [1,43 Kb] (cкачиваний: 62)


Несомненно, позиционирование является одним из наиболее полезных инструментов, который дизайнеры имеют в своем CSS Toolbox. Однако Есть несколько концепций о позиционировании, которые могли бы помочь начинающим.

Во-первых, что такое позиционирование?

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

Элементы статически располагающаяся по умолчанию

По умолчанию позиционирование, которое неявно применяется к каждому элементу на странице, является статическим. Статическое позиционирование означает, что каждый элемент находится в естественном порядке он добавляется на страницу. Блоки отображаются в других элементах блока и встроенные элементы отображаются рядом с другими встроенными элементами.

Относительное позиционирование


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

.relativeDiv{

    /*
        Moving the div to the top-left
        from where it would normally show:
     */

    position:relative;
    top:-50px;
    left:-100px;
}


Исправленное позиционирование

Добавление позиции: крепится к CSS декларациям элемента, позиции, в связи с окном браузера. Это позволяет отображать панели инструментов, кнопки и меню, которые закреплены в фиксированном положении и с помощью страницы. Проще говоря где вы закрепили элемент, там он и будет отображаться в независимости от изменения окна браузера или пролистывания страницы.

.fixedDiv{

    /*
        Fixing the div 20 px from the bottom
        of the browser window:
     */

    position:fixed;
    right:20px;
    bottom:20px;
}


Абсолютное позиционирование

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

    /* Absolute and Fixed positioning would work as well: */

    position:relative;
}
.absoluteDiv{

    /*
        Displaying the div 50px from the right and 90px from
        the top of its parent because of the explicit positioning
     */

    position:absolute;
    right:50px;
    top:90px;
}



Заключение

Покажи те ваш крутой дизайн который вы сделали с позиционированием свойства? Хвастовство в комментариях ниже. =)
Опубликовал dimas_ua, 8-04-2011, 00:00 Комментариев: 0
 (голосов: 0)