css позиционирование блоков и элементов

Цель урока: Знакомство с понятием позиционирования блоков и элементов в CSS. Фиксированное, относительное и абсолютное позиционирование.

К оглавлению

Содержание:

Позиционирование блоков
Перекрытие слоев в CSS

Позиционирование блоков

Элемент в html — это прямоугольник; схемы позиционирования определяют где должен располагаться этот прямоугольник, а также как он должен влиять на элементы вокруг себя.

Рассмотрим два элемента, служащих для стилизации:

Тег div — это блочный элемент, который может содержащать другие блоки, такие как, например, изображения и таблицы.

Пример:

<div>блок текста<img src="…"/></div>

Тег span — строчный элемент, содержащий любой текст; элемент можно вставить прямо в строку (встраиваемый элемент). Может заменить собой элементы: FONT, I, B, U и т.п.

Пример:

Текст <span>продолжение текста</span>

Статическое позиционирование

position: static

Статическое позиционирование — это позиционирование элемента по умолчанию. Такой элемент занимает на веб-странице место соответственно своему положению в html-коде, т.е. определенное в нормальном потоке.

Нормальный поток элементов — это отображение элементов соответственно их месту в коде

На статически позиционированный элемент не действуют свойства top, bottom, left и right.

Пример:

div{
  position: static;
}

Фиксированное позиционирование CSS

position: fixed

Фиксированно позиционированный элемент удаляется из потока HTML и позиционируется относительно окна браузера. Элемент как будто «плавает» над другими тегами страницы.
Он остается на месте при прокрутке страницы.
При фиксированном позиционировании необходимо задать координаты расположения элемента.

Установка координат:

top | bottom
left | right

Значения:
auto | величина | %

Пример:

...
<style type="text/css">

p{
	position: fixed;
	top:30px;
	right:5px;
}

</style></head> 
<body> 
<p>
Я на уроке в первый раз.<br/>
Теперь я ученица.<br/>
Вошла учительница в класс,-<br/>
Вставать или садиться?<br/>
</p>
<div>Блок без стиля</div>

Результат:

Относительное позиционирование CSS

position: relative

Относительное позиционирование располагает элемент относительно его нормального положения.
При относительном позиционировании обязательна установка координат расположения элемента относительно его нормального положения.

Установка координат:

top | bottom
left | right

Значения:
auto | величина | %

Пример:

<p>
Я на уроке в первый раз.<br/>
Теперь я ученица.<br/>
Вошла учительница в класс,-<br/>
Вставать или садиться?<br/>
</p>
<div style="position:relative; top:-100px; left:150px; color:red">
Относительно позиционированный блок
</div>

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Относительно позиционированный блок

Абсолютное позиционирование CSS

position: absolute

Абсолютная позиция отсчитывается от ближайшего к элементу родительского контейнера, который имеет позиционирование absolute, relative или fixed (кроме static). Если такой родительский элемент отсутствует, то им считается окно браузера.
При абсолютном позиционировании обязательна установка координат расположения элемента относительно его родителя (см. пред. пункт).

Установка координат:

top | bottom
left | right

Значения:
auto | величина | %

Пример:

h1 {
  position:absolute;
  top: 100px;
  left: 200px
}

Результат:

Пример взаимодействия с родительским блоком:

<div style="position:absolute; top: 50px; background-color:#F00">
	блок 1
</div>
<div style="position:absolute; top:20px; background-color:#0F0">
	блок 2
</div>

Результат:

блок 1

блок 2

<div style="position:absolute; top: 50px; background-color:#F00">
	блок 1
                <div style="position:absolute; top:20px; background-color:#0F0">
		блок 2
	</div>
</div>

Результат:

блок 1

блок 2

Перекрытие слоев в CSS

z-index

Блоки с абсолютным позиционированием могут быть расположены на разных уровнях, которые определяются свойством z-index.

Значения:

auto «нулевой уровень», задаваемый по умолчанию;
отрицательное число — объект располагается «ниже» нулевого уровня (удаляется вглубь, под элементы);
положительное число — объект располагается «выше» нулевого уровня.

Пример:

...
<style type="text/css">

img{
	position:absolute;
	left:0px;
	z-index:-1;
}

</style></head> 
<body> 
<div style="position:relative">
<img src="..."/>
<p>Параграф нормального потока</p>
</div>

Результат:

Задание: Скачайте файл.
Добейтесь эффекта, как на итоговом изображении, используя файл logo.png в качестве тега img.

Используйте следующие свойства CSS:

position:
z-index:
top:
left:
opacity:0.5; /* прозрачность */
filter: Alpha(Opacity=50); /* прозрачность для IE */

Требуемый результат:

К оглавлению