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

Автор: Aport Среда, Январь 28th, 2015 Нет комментариев

Рубрика: Разное

Что ж, рассмотрим еще одно значение - 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>

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты