Углубленное позиционирование в 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:
Введите изображенные цифры:
Captcha
Главная
X

youtube.com/watch?v=7hFivbgIEqk

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

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