Углубленное позиционирование в CSS

Что ж, рассмотрим еще одно значение - absolute. Которое очень полезно, и играя с парочкой значений свойства position, можно показать всю мощьность этих значений.

Например : absolute - указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.

Для примера мы вложили в один тег (контейнер) <div> другой <div> и у нас получился необычный эффект - можно подумать, что фон вышел из под контроля. Что же конкретно случае мы обошлись без всяких осей Z.


ниже по Z, ниже по Z, ниже по Z, ниже по Z, ниже по Z, ниже по Z, ниже по Z, ниже по Z, ниже по Z, ниже по Z, ниже по Z,


К сожалению в этом примере для наглядности сверху я все же отступил 275 пикселей. Ну и конечно же значение absolute сделало своё дело и вышло на первый план, как бы выше по оси Z.

Код:

<div style="position: absolute; top: 275px; background: #F0FAFF; width: 400px;">
<div style="position: relative; left: 20px; border: 1px solid black; padding: 15px;  margin: 5px;">
Для примера мы вложили в один тег (контейнер) &lt;div&gt; другой &lt;div&gt;
и у нас получился необычный эффект - можно подумать, что фон вышел из под контроля. Что же конкретно случае мы обошлись без всяких осей Z.
</div>
</div>

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

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

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


Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

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

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

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

Phpstorm7 LiveEdit

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

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

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

Защита сервера от ошибок в phpMyAdmin

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

Yapro CMS:

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

youtube.com/watch?v=7hFivbgIEqk

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

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