Углубленное позиционирование в 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>

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

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



Предложения и пожелания:
Ваше имя: Ваш E-mail:
Введите изображенные цифры:
Captcha

HTML (19)

CSS (36)

PHP (22)

MySQL (14)

JavaScript (57)

Flash (6)

XML (3)

Apache (34)

Дизайн (35)

Продвижение (31)

Программы (26)

Unix (11)

Интересное (37)


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


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

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

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

HTML5 - новые виды атак

Социальные рекомендации Twitter в Google

Ашманов про стартапы

Skype Distributed Database Architecture

Erlang - лекарство при высоких нагрузках

Amazon Web Services: инструменты обеспечения масштабируемости и отказоустойчивости

Обсуждения на форуме:

некорректно отображается страница в браузерах

не могу войти в admin

Нужна критика идеи

Поиск по дополнительным полям и формам

Вопрос по категориям

Несколько вопросов по проекту.

Плагины, меню и интеграция

Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter| Здравствуйте, Гость | Войти | Регистрация| Карта сайта | RSS ленты
О проекте | Скачать CMS | Видеоуроки | Документация | Плагины | Форум | Идеи | Новости | Веб-мастеру | Контакты

YaPro CMS в Живом Журнале

YaPro CMS в Твитере

YaPro CMS в Одноклассниках

YaPro CMS в Яндекс.Блогах


youtube.com/watch?v=7hFivbgIEqk

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


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