Позиционирование и координаты CSS

Слои и координаты в CSS играют большую роль, т.к. это просто и удобно.
Давайте рассмотрим простой пример наложения слоя на слой.
Слой 1 выше Слоя 2
Сделать слой выше можно 2-мя способами - изменить его относительно координаты Z либо в сторону + либо в - Но учтите минус работает не во всех браузерах, и часто он просто делает объект невидимым.
Слой 1 выше
Слой 2 ниже

А достигается это очень интересным и необходимым свойством position, которое устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
В данном случае у свойства position значение relative, что означает, что положение элемента устанавливается относительно родителя, иными словами, контейнера, в который вложен элемент. В нашем случае этот контейнер является тегом <div>. Если родительский элемент явно не задан, то в качестве него выступает окно браузера. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от родителя, в зависимости от применяемого параметра.
Мы не только сдвинули Слой 2 по оси Z, но и выставили left:5; и top:-15;, что означает сместить относительно левого края на 5 едениц, а относительно верха на -15, что и означало поднять на 15 пикселей. Единицы измерения могут быть любыми, выбирать Вам. Что же конкретно происходит в коде Вы можете увидеть посмотрев HTML вид этой страницы.

Оцени публикацию:
  • 6,30
Оценили человек: 6

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • Выкладывайте нормальный код, как на нормальных сайтах!
    03 января 2014, 09:03 коммент полезен : 0 # Senjor_nekit
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » CSS »